HTML and CSS Reference
In-Depth Information
SERVING
IMAGES
RESPONSIVELY
Another advantage of Mobile First is that you can easily serve smaller background
images to smaller devices, and then swap them out for bigger images using rules
in wider media queries. For example, in simple-responsive-header-image1.html,
a background image spans the whole <header> , which runs across 100 percent of
the screen width. I've included it like this:
header {
.
background: url(images/sunset.jpg) center;
}
Setting it to display in the center ensures that the nice sun in the center of the
image will always display in the center of the header. But there's more you can do
here.
Ta ke a l o o k at s i m p l e - res p o n s i ve - h ead e r - i m age 2 . ht m l . T h e o r i g i n a l 1 0 2 4 px
wide image is 41 KB, which doesn't make much difference to a user with a fast con-
nection but could slow down response time somewhat for a mobile user on a slow
mobile network. To mitigate this, I've included a 480px version in the default CSS:
header {
.
background: url(images/sunset-480.jpg) center;
}
 
 
 
Search WWH ::




Custom Search