Do background images load if they are replaced with media queries?

Question

I'm creating a responsive design so my website is viewed well on both Desktop and Mobile devices. On my website I have a pretty large background image on one of my divs.

Now what I have been wondering is: Does the background image on my div load if it is replaced by a color in a media query?

Example:

div {
    background: url(img/large-image.jpg);
}

@media screen and (min-width: 240px) and (max-width:830px) {

    div {
        background: #000;
    }
}

Answer 1

No it wouldn't as you're completely overriding the background property*.

For reference, however, if you wish to keep your image and add in a colour, rather than using the background property, use the individual background-image and background-color properties:

div {
    background-image: url(img/large-image.jpg);
}

@media screen and (min-width: 240px) and (max-width:830px) {
    div {
        background-color: #000;
    }
}

* Note that this is browser-specific; to save time the majority of browsers will only load resources when they're required. See also: Are unused CSS images downloaded?

Answer 2

Your images are still loaded by browser, as long as they are in your CSS. You can check it by using Chrome Debugger Tool > Network.

There is a interesting article about image load & performance in responsive design:

http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/