Hello all, please forgive the elementary question. If I have the following css, are both of the images loaded on the smaller device or only the background image for the appropriate media query? I am basically trying to serve a smaller menu sprite to the iPad and a larger sprite to the desktop.
@media only screen and (min-width: 960px) {
bk-head {
background-image: background-image: url(../images/BIGGER-IMAGE.png);
}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
bk-head {
background-image: background-image: url(../images/SMALLER-IMAGE.png);
}
}