user6483684 user6483684 - 5 months ago 12
CSS Question

set img as background

I would like to know how I can set my

background
as an image using

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


I know I don't have an image name that is because I'm picking an image from a dropdown menu.
My problem is how do I integrate the code about to be displayed as a
background image
.

This is what I need to integrate it to.

.container {
background-color: lightgrey;
width: 500px;
height: 500px;
border: 2px solid;
position: relative;
overflow: auto;
}

Answer

the background property doesn't apply to img tag, because img tag as already a src to use an image of course, so if you want to apply a background, then use some element like div, applying then properties in CSS.

If you want to pick that from dropdown you can use classes for that using JS

$('.container').hide();
$('#opt1').show();
$('select').change(function() {
  $('.container').hide();
  $('#' + $(this).val()).show();
})
body {
  margin: 0
}
.container {
  width: 500px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: auto;
}
.red {
  background: red
}
.green {
  background: green
}
.blue {
  background: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="opt1">red</option>
  <option value="opt2">green</option>
  <option value="opt3">blue</option>
</select>
<div id="opt1" class="container red"></div>
<div id="opt2" class="container green"></div>
<div id="opt3" class="container blue"></div>