Using media queries to define backgrounds with separate images based on browser size:
@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');}}
The structure of my div elements:
<div class="outerwrap">
<div class="innerwrap">
<div class="container">
The container class holds the background image.
When resizing the browser from, for example, 1440 to 960, will the relevant images be requested or will all images still be requested?
If all images are being downloaded, how can I fix this issue?
Thank you.