Top Questions

  • 2.9 Years

    • Category : Jquery
    • Location : Chandigarh
    • Posted On : Jan 25, 2017

    You can change background of container using this code

    Html:
    
    <form class="form-inline">
         <div class="form-group">
          <label for="fileToUpload"> <img src="images/upload.png'; ?> " width="200" height="100" id="blah1" /></label>
           <div class="input-group">
      <input type="file" name="exmaple" id="fileToUpload"  required>
      <input type="hidden" id="backupimgurl" val="">
     </div>
      </div>
            <div class="form-group">
        <div class="input-group">
     <select class="form-control" onchange="$('#home-page').css({'background-position':$(this).val()});" name="BackgroundPosition" id="BackgroundPosition">
        <option value="center" selected="selected">Center</option>
        <option value="center top">Center/Top</option>
        <option value="center bottom">Center/Bottom</option>
        <option value="left center">Left/Center</option>
        <option value="left top">Left/Top</option>
        <option value="left bottom">Left/Bottom</option>
        <option value="right center">Right/Center</option>
        <option value="right top">Right/Top</option>
        <option value="right bottom">Right/Bottom</option>
      </select>
     </div>
     </div>
     <div class="form-group">
      <div class="input-group">
      <select class="form-control" onchange="$('#home-page').css({'background-repeat':$(this).val()});" name="BackgroundImageRepeat" id="BackgroundImageRepeat">
       <option value="repeat-x">Repeat Horizontal</option>
       <option value="repeat-y">Repeat Vertical</option>
       <option value="repeat">Repeat</option>
        <option value="no-repeat" selected="selected">No Repeating</option>
          </select>
      </div>
    </div>
    <div class="form-group">
      <div class="input-group">
       <input class="form-control" value="" name="BackgroundColor" style="width:80%; display:inline-block;" maxlength="6" placeholder="color">
     </div>
      </div>
     <div class="form-group">
     <div class="input-group">
         <button type="submit" class="btn btn-success">Save</button>
         </div>
          <div class="input-group">
         <button type="submit" class="btn btn-danger">Cancel</button>
        </div>
       </div>
    </form>
    
    jQuery:
    
    jQuery(document).on('change','#fileToUpload',function(){
     var imgbg = window.URL.createObjectURL(this.files[0]);
      jQuery('#backupimgurl').val(imgbg);
       //console.log(imgbg);
     jQuery('#home-page').css({backgroundImage: "url(" imgbg ")"});
    });
    

Add Your Answer

When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Let's work to help developers, not make them feel stupid.