Question

if I use media query for defining my background using separate images according to the browser size, such as:

@media (min-width:1440px){div.container{background:URL('bg1440.png');}}
@media (min-width:960px){div.container{background:URL('bg960.png');}}
@media (min-width:480px){div.container{background:URL('bg480.png');}}

and this is my div structure:

<div class="outerwrap">
  <div class="innerwrap">
    <div class="container">

The container class is the one who holds background image.

will the browser request only relevant image or will it request all images?

If I open the browser and resize it, let’s say from 1440 to 960, will the media query request two relevant images or will it still request all images?

if it downloads all images, what should I do to fix that?

Thank you.

Answer 1

It depends on the browser and platform.

At the moment, most browsers will download the needed background image only.

Note that for other media the behaviour can be different (including images that are not background images).