barronzavala barronzavala - 5 months ago 23
Javascript Question

< img src> as background image in div

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

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.