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.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="mainBG" class="homeContent" data-type="background">
    </div><!--end div "mainBG"-->
</body>
</html>

With our HTML in place, let’s create our CSS file.  I like to reset my CSS by getting rid of unwanted margins, padding, and borders with this basic bit of code to start off my CSS file.

body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, fieldset, legend, label, input, textarea {
    margin: 0; padding: 0; border: 0;
}
sh1, h2, h3, h4, h5, h6, p {
    margin: 0 0 1em 0;
}
h1{font-size: 200%;}
h2{font-size: 170%;}
h3{font-size: 160%;}
h4{font-size: 140%;}
h5{font-size: 120%;}

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.

.homeContent {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

#mainBG {
   background: url(images/big.jpg) no-repeat scroll;
	background-position:center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

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.

@media only screen and (max-width: 1024px) and (orientation:landscape) {
   #mainBG { background: url(images/medium.jpg) 50% 0 no-repeat scroll !important;
	background-position:center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#mainBG { background: url(images/medium.jpg) 50% 80% no-repeat scroll !important;
	background-position:center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
}

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.

@media only screen and (min-width: 0px) and (max-width: 767px) {
	#mainBG { background: url(images/small.jpg) 75% 80% no-repeat scroll !important;
	background-position:center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
}

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.

Download the full source code from this tutorial here.

SHARE THIS POST
  • Anonymous

    I make responsive background more easily using Jquery backstretch -> http://www.izulcybercafe.com

  • Maxkarkowski

    Where do you set your font-size to em? Your Headlines are in percent. and your body or your reset hasn’t set a font-size.

  • Brad Frost

    It seems like there are some opportunities to reduce the complexity of the code here. It’s a good idea to start with a mobile-first approach, which means loading in the smallest image by default. So the baseline could look like this:

    #mainBG {
    background: url(images/small.jpg) 50% 50% no-repeat scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover; /*Opera supports background-size without vendor prefix*/
    }

    And then scaling up from there you can get to medium sized tablets

    @media only screen and (min-width: 768px) {
    #mainBG {
    background-image: url(images/medium.jpg);
    }
    }

    Then finally to large screen sizes

    @media only screen and (min-width: 1024px) {
    #mainBG {
    background-image: url(images/big.jpg);
    }
    }

    Also, declaring background-size and background-position in the first rule means you don’t need to redeclare them within the media queries. Getting rid of the !important declarations is a good idea as they can be very difficult to manage. Also, vendor prefixes should go before the official declaration because (hopefully!) one day they’ll be phased out.

    We can also reduce the amount of conditions in the media queries, especially things like (min-width: 0px) and the multiple declarations for medium-sized screens.

    Ultimately, writing mobile-first styles reduces the amount of complexity in the code and ensures that browsers that don’t support media queries (which includes quite a few mobile browsers) don’t get penalized with downloading large background images.

  • http://www.deluxeblogtips.com/ Rilwis

    Just a small question, why don’t we apply the CSS for the body tag directly instead of the div. It seems to be redundant.

  • http://twitter.com/jorgepablo178 Jorge Martinez

    nice………

  • http://twitter.com/macartisan macartisan

    The index page in the downloadable sample has a .php extension. Since you’re not using PHP, that should be changed to .html

  • Anonymous

    Wouldn’t it just be easier to add a div, position it, z-index it to the back, place the image in the div (as opposed to being a CSS background) and then it would resize dynamically / responsively?

    For what it’s worth, I’ve done similar with sprites. Yeah man, responsive sprites.

  • http://www.toddmotto.com/ Todd M.

    Really helpful, thank you!

  • Venky

    Nice work, but there is issue while using in more than IE7

  • http://www.ladsrack.com/ Mens Underwear

    Excellent this is just what I was looking for – was wanting to create a new background for a site but was struggling to make it compatible

  • Olga

    Thank you so much for your article! I finally solved my problem with responsive background. When i resize the browser window bg img moving to top. But now after your article i see where i was wrong. I was needed to make a few pics fow whole window. Thank you!)

  • http://www.friv3.co/ friv 3

    The details are well-explained and very concise.