Changing Different background image based on screen :- css HTML5 Gallery

Question

Concept is simple, I have a html5 page and it is responsive , just the bground images does not change with the screen size : right now code is:

<div id="home-gallery" class="gallery-container fullscreen">
<section id="home-welcome" class="slide-1 gallery-slide background-cover" style="background-image:url(static/img/home/image1.jpg)">
.....

<section id="home-campaigns" class="slide-2 gallery-slide background-cover" style="background-image:url(static/img/home/image2.jpg)">

That said it using one common image. What I tried doing in CSS is:

@media (min-width:800px) { background-image: url(bg-800.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

But I am not sure how to associate style="background-image: property to css code? should I write:

<section id="home-campaigns" class="slide-2 gallery-slide background-cover" style="background-image"> 

and in css #home-welcome background-image @media (min-width:800px) { background-image: url(bg-1024.jpg) } @media (min-width:1024px) { background-image: url(bg-1024.jpg) } @media (min-width:1280px) { background-image: url(bg-1280.jpg) }

Please help. I tried. `

Answer 1

@media (min-width:800px) { 
#home-welcome{
background-image: url(bg-800.jpg);
}
}
@media (min-width:1024px) {
#home-welcome{
 background-image: url(bg-1024.jpg);
}
}
@media (min-width:1280px) {
#home-welcome{
 background-image: url(bg-1280.jpg);
}
}

This would set the background image of home-welcome div according to screen size.

Although using the min-width, all three rules would match. You should use max-width instead.

Edit : I take my statement about max-width back. Depends onw hat you want to achieve. Just keep in my mind that css rules cascade when multiple rules match and the last declared rule wins. Use !important wisely.

Corresponding html

<section id="home-welcome" class="slide-2 gallery-slide background-cover">

Also check this http://www.w3schools.com/cssref/css3_pr_background-size.asp

You can use background-size:contain so that the image fits the container div.