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;
    }
}

have you tried running it to see? I'm pretty sure the way it works with CSS media queries is if the screen res falls within those dimensions then for that particular element's style it uses what you defined in the query instead of whats outside of it. — j0hnstew, Oct 29 '13 at 14:21
I do not know how to see which files are loaded on my mobile device. — Swen, Oct 29 '13 at 14:22

score 6 · Accepted Answer · edited May 23 '17 at 12:08

6

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?

edited May 23 '17 at 12:08

Community

1
1

answered Oct 29 '13 at 14:22

James Donnelly

126,410
34
208
218

I was just wondering if using a media query to replace the image with a plain color would increase the loading speed on mobile devices. And as you described it, it seems that it does! Thank you very much :) – Swen Oct 29 '13 at 14:23
You also can do this, `background: url(../images/tab-1a.png) no-repeat #767676;`, if you want a background image + color! Good answer though – Josh Powell Oct 29 '13 at 14:30

score 2 · Answer 2 · answered Oct 29 '13 at 14:24

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/

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

2 Answers2