How can I change the a background image, depending on the size of the screen?

问题

I am using Zurb foundation to handle my styling, I know there is a data interchange class for changing images based on screen size but not sure if you can use it to change the background image of a div?

background-image:image-url('img_home_first_bar.jpg');

回答1:

You can do this by using media queries as said in the comments by Rahul Desai.

Example:

HTML:

<div class="backgroundchange"></div>

CSS:

.backgroundchange {
    width: 100px;
    height: 100px;
    background: grey;
}
@media screen and (min-width: 1080px) {
    .backgroundchange {
        background-image: url("backing1.png");
        background: blue;
    }
}
@media screen and (min-width: 487px) and (max-width: 1079px) {
    .backgroundchange {
        background-image: url("backing2.png");
        background: green;
    }
}
@media screen and (max-width: 487px) {
    .backgroundchange {
        background-image: url("backing3.png");
        background: red;
    }
}

So using these media queries you can set the CSS to change depending on what the window size is.

Note: Make the result window bigger and smaller to see the effect.

DEMO HERE