Developing a Responsive Website: Background Images

A while back we took A Look at Responsive Web Design
and how different designers utilize it in different ways. Now
that we've seen a few examples in action, let's create a responsive
website of our own.

In this installment we're going to set up the structure of our
homepage and add in a few media queries that will help the site load
quicker, navigate better, and keep our desired appearance across
multiple devices, platforms, and resolutions.

Before we dive in to the HTML, let's cover the "viewport" meta
tag. The Apple iPhone and iPod touch are programmed to
automatically scale down websites in the iOS version of Safari.

This will allow the user to see the site as it's intended, but scaled
down in order to fit in the smaller screen. Since we're going to
create a media query specifically for the screen, we don't want the
iPhone to scale it. The viewport meta tag will also allow you to
set parameters on how much a viewer is able to zoom in or out, as well
as what scale your site should initially load in. For this
tutorial we're going to tell it not to scale at all.

Beginning with the HTML, you'll notice that it's pretty basic HTML5
stuff with the exception of our viewport meta tag and our main
background div.

Now that we're starting from scratch we can open up our body tag and
add some style to it. I set my background color to white and chose
a dark gray for my text coloring. Using a white background with
black text often is too sharp of a contrast and can put a strain no the
eyes of a viewer, going with a dark gray helps avoid that issue.

html, body { height: 100%; }

You'll also notice that I set my font size using em, this is a
crucial step when developing a responsive site because it is percentage
based and will dynamically adjust itself on the fly. If you were
to set your font to a specific pixel size, once your site was scaled
down to mobile phone dimensions it won't flow as nicely with the rest of
your design and may fill the entire screen, or the letters may overlap
each other.

We can also add the style to our .homeContent class as well as our
#mainBG id. I've defined the height of the page, set the width to
100% and centered the content within the .homeContent class. The
#mainBG id pulls in our background image, which is a stock photo I got
from 123RF.
I also set the background-size property to "cover", which will scale
the image to fill the screen and allow our background image to maintain
proper proportions in larger resolutions. The size of my "big.jpg"
background image is 1920 x 1189.

Now that we've got the basics entered, we can write our media
queries. The first two we're going to set are for tablets.
We're going to call in our medium sized background image as some tablet
viewers may be relying on their network to load the site and there's no
need for them to waste the data or time to load an image twice the size
of their display. The size of my "medium.jpg" background image is
1024 x 770. We're also going to position it so that it will still
display properly across various tablets.

The last media query we're going to write is for mobile phones.
We're going to pull in our "small.jpg" background image, for the same
reasons noted with our tablet query, as well as position it to display
properly. My "small.jpg" background image is 767 x 475.

Preview your work in a browser. Start with your browser window
full screen, then squeeze it in and watch as the image immediately
begins adjusting to the new dimensions. See if you can spot where
your media queries occur and your background image changes to a smaller
version.

SHARE THIS POST

ABOUT THE AUTHOR

Developer Drive is a quality Web development blog featuring tutorials, tips, news and reviews on things that matter to developers. We cover the latest trends and techniques such as CSS3, HTML5, WordPress, responsive/mobile design and much more.