CSS - Media Queries loading backgrounds. How do they behave?

Asked

Viewed 275 times

1

I’m making a website responsive and would like to upload different images in the background depending on the device. I will respect the use of data from mobile users and do not want to force the upload of an image 1920x500 for example.

If I use media queries in CSS (as represented below) what exactly happens?

A) Both images are loaded but only one is shown;

B) Only the image that is in the user screen condition is loaded;

C) [other answer?]

@media screen and (min-width: 768px) {
    #divFundo {
        background-image: url("../images/imagem_grande.png");
    }
}
@media screen and (max-width: 768px) {
    #divFundo {
        background-image: url("../images/imagem_pequena.png");
    }
}
css css3 media-queries background-image

1 answer

0


Look, I’ll do better than answer you directly. Try opening this page in google Chrome with the console open. Go to the network tab, select "IMG".

This screen will show you in the order everything that is being downloaded to the client’s machine. In it you will see whether the images were loaded or not.

Tip: Do it again, but press CTRL+F5 to force the browser to download everything again.

Browser other questions tagged css css3 media-queries background-image

You are not signed in. Login or sign up in order to post.