< img src> as background image in div

Question

is it possible to make this my background

<img src="" alt="sample" width="480" height="500" border="0">

this is my code below i want to be able to make my images backgrounds and be able to change them the same way im doing it at the moment please help ive been asking and looking for an answer and all i get is how i can set on image as a background without being able to change it with a dropdown menu

 function fctCheck(gender) { var elems = document.getElementsByName("subselector"); for (var i = 0; i < elems.length; i++) { elems.item(i).style.display = "none"; } document.getElementById(gender).style.display = "block"; } $('#men').on('change', function () { $("#wsl").css('display', (this.value == 'lsm') ? 'block' : 'none'); }); $('#men').on('change', function () { $("#mtsm").css('display', (this.value == 'tsm') ? 'block' : 'none'); }); $(document).ready(function() { $('.colore.active').each(function(){ $('.container img').attr('src', $(this).data("image")); }); $('.colore').on('click',function(){ $('.container img').attr('src', ''); $('.container img').attr('src', $(this).data("image")); }); }); 

 .container {background-color: lightgrey; width: 150px; height: 150px; border: 2px solid; position: relative; overflow: auto; } .container2 {background-color: lightgrey; width: 150px; height: 150px; border: 2px solid; position: relative; overflow: auto; } .colore { float: left; width: 20px; height: 20px; margin: 5px; border: 1px solid rgba(0, 0, 0, .2); } .white { background: #FFFFFF; } .yellow { background: #FAFF38; } .orange { background: #FFA200; } .red { background: #FF0000; } .dorange { background: #FF5500; } .lgreen { background: #80FF00; } .green { background: #45C731; } .turk { background: #17DDBC; } .lblue { background: #00A2FF; }.blue { background: #1713F6; }.purple { background: #AB09D3; }.black { background: #000000; } 

 <div id="box" class="container" style="float:left;"> <img src="" alt="sample" width="150" height="150" border="0"></div> <div class="container2" style=" float: left;"> <select id="Gender" onchange="fctCheck(this.value);"> <option value="">Choose Gender</option> <option value="men">Men</option> </select> <br> <br> <select id="men" name="subselector" style="display:none"> <option value="">Choose an item</option> <option value="lsm">long sleeve</option> < </select> <select id="wemen" name="subselector" style="display:none"> <option value="slw">short sleeve</option> </select> <select id="girls" name="subselector" style="display:none"> <option value="shortsg">shorts</option> </select> <select id="boys" name="subselector" style="display:none"> <option value="tshirtb">tshirt</option> </select> <div style='display:none;' id="wsl"> <div class="colore white active" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png"> </div> <div class="colore black" data-image="http://mebe.co/ford"> </div> <div class="colore yellow" data-image="http://mebe.co/f150"> </div> <div class="colore orange" data-image="http://mebe.co/yukon"> </div> <div class="colore red" data-image="http://mebe.co/370z"> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script> <script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> 

Answer 1

Change HTML from this

<div id="box" class="container" style="float:left;">
 <img src="" alt="sample" width="150" height="150" border="0"></div>

To this

  <div id="box" class="container" style="float:left;"></div>

Change javascript from this

$(document).ready(function() {
  $('.colore.active').each(function(){
    $('.container img').attr('src', $(this).data("image"));

To this

$(document).ready(function() {
  $('.colore.active').each(function(){
     $('.container').css(
       'background-image','url(' +$(this).data("image")+')'
      );

Convert the rest of the $.attr calls to follow the $.css call example above.

Answer 2

If you want the image in background of the page then replace your document.ready function:

$(document).ready(function() {
  $('.colore.active').each(function(){
    $('.container img').attr('src', $(this).data("image"));
  });
  $('.colore').on('click',function(){
    $('.container img').attr('src', '');
    $('.container img').attr('src', $(this).data("image"));
  });
});

With following document.ready function:

$(document).ready(function() {
  $('.colore').on('click',function(){
     $('body').css('background-image','url(' +$(this).data("image")+')');
  });
});

Answer 3

the problem is that the code was wrong this is the correct code

 $(document).ready(function() { $('.colore.active').each(function(){ $('.container ').css( 'background-image','url(' +$(this).data("image")+')' ); }); $('.colore').on('click',function(){ $('.container').css('src', ''); $('.container ').css('background-image','url(' +$(this).data("image")+')'); }); }); 

Answer 4

I cleaned up your sample code a bit and I think I have added the background switch you are looking for

 function fctCheck(gender) { $("select[name='subselector']").hide(); $("#" + gender).show(); } function setBackground(selector, url){ $(selector).css("background-image", "url(" + url + ")" ); } $("#men").on("change", function() { $("#wsl")[this.value === "lsm" ? "show" : "hide"](); $("#mtsm")[this.value === "tsm" ? "show" : "hide"](); }); $(function() { setBackground("#box", $(".colore.active").attr("data-image")); $(".colore").on("click", function() { setBackground("#box", $(this).attr("data-image")); }); }); 

 #wsl { display:none; } select[name='subselector'] { display:none; } #box { background-size: cover; background-position: center center; } .container, .container2 { background-color: lightgrey; width: 200px; height: 200px; border: 2px solid; position: relative; overflow: auto; float: left; } .colore { float: left; width: 20px; height: 20px; margin: 5px; border: 1px solid rgba(0, 0, 0, .2); } .white { background: #FFFFFF; } .yellow { background: #FAFF38; } .orange { background: #FFA200; } .red { background: #FF0000; } .dorange { background: #FF5500; } .lgreen { background: #80FF00; } .green { background: #45C731; } .turk { background: #17DDBC; } .lblue { background: #00A2FF; } .blue { background: #1713F6; } .purple { background: #AB09D3; } .black { background: #000000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box" class="container"></div> <div class="container2"> <select id="Gender" onchange="fctCheck(this.value);"> <option value="">Choose Gender</option> <option value="men">Men</option> </select> <select id="men" name="subselector"> <option value="">Choose an item</option> <option value="lsm">long sleeve</option> </select> <div id="wsl"> <div class="colore white active" data-image="http://lorempixel.com/200/200"></div> <div class="colore black" data-image="http://lorempixel.com/150/150"></div> <div class="colore yellow" data-image="http://lorempixel.com/160/160"></div> <div class="colore orange" data-image="http://lorempixel.com/170/170"></div> <div class="colore red" data-image="http://lorempixel.com/180/180"></div> </div> </div>