CODEWITHSUNDEEP
javascriptjqueryhtmlcss
barronzavala
barronzavala

Reputation: 5

< 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">

Upvotes: 0

Views: 4785

Answers (4)

us190190
us190190

Reputation: 126

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")+')');
  });
});

Upvotes: 2

JonSG
JonSG

Reputation: 13152

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>

Upvotes: 0

barronzavala
barronzavala

Reputation: 5

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")+')');
  });
});

Upvotes: 0

etherealite
etherealite

Reputation: 88

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.

Upvotes: 1

Related Questions