CODEWITHSUNDEEP
jqueryhtmlcss
Maulik
Maulik

Reputation: 379

Is it possible to give different background images using different <div> tags?

I am dealing with a responsive website which contains different backgrounds.
I put one background using <div> tag and now if I want another background then how to do it with <div> because whenever I tried to put another background then it not shown, it only shows my 1st background.

HTML:

<div id="home" > <div id="slideshow" >
  <img src="img/01.png" style="width: 150px; height: 150px; display: none;"> 
  <img src="img/swan.jpg" style="width: 150px; height: 150px; display:none; "> 
</div></div>

CSS:

#home {
  background-image:url("../img/sofa.jpg");
  background-size:100% auto; background-repeat:no-repeat;height:100%; position:absolute; width:100%; top:0; left:0;
}

and in #slideshow I used jQuery inline.

Now suppose I give <div style="background-image:url("img/s1.jpg");">...</div> then it will only take sofa.jpg as background in full height and width. Not displayed s1.jpg as another background.

Upvotes: 1

Views: 293

Answers (1)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

Your second div just gets hidden under the first one as you are fixing the first div with top and left properties.. for your second div to appear you must use the same css styles on it. Right now you are just assigning a background image. Add the other styles too as you have in your CSS already 

.s1{
  background-image:url("../img/s1.jpg");
  background-size:100% auto; 
  background-repeat:no-repeat;
  height:100%;   
  position:absolute; 
  width:100%; 
  top:0; 
  left:0;
}

Add this class to your div

<div class='s1'></div>

Upvotes: 1

Related Questions