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?