Using CSS Background-size Responsively

If the latter half of 2011 is to be remembered for anything within the web community it will be for the rapid evolution and adoption of responsive web design. Though not the Holy Grail for every mobile web strategy it does correct some of the mistakes the industry made in trying to tame the untameable.

Using Background-size Responsively

Before Ethan Marcotte's A List Apart article on Responsive Web Design came along designers revelled in the constraints of the 960 grid; the limitations we imposed on our websites by determining a fixed grid system in an unfixed world gave us a false sense of control over our designs. Responsive design has led many to rethink the assumptions we make when building websites and forcing us to yet again think about the multitude of screens, devices and people that use the web. No longer can we simply increase the width of our websites every few years to what we feel is a size that then covers an acceptable percentage of users.

With responsive design the tried and tested processes we have employed over the years are being rewritten to suit a new and unfamiliar way of building websites. One such process that is being put to the test is our implementation of imagery.

Responsive Inline Images

Images in web design have been easy for years. In the last few years only CSS Sprites like those in use at Google have added something new to the mix. But in responsive web design a whole host of issues have come to the fore as many of the images we use in our designs are not created to suit anything other than the size for which they were created; images aren’t built to be responsive.

Google Sprite

Luckily however inline imagery doesn’t provide all that many issues in a responsive design until you discover an image disappearing off to the right of your mobile screen. In some cases you can learn to avoid or work around certain issues, but this problem required a solution; it came quickly and simply:

img {height:auto; max-width:100%:}

The solution comes in setting the max-width to ensure that no image appears to overflow the constraints of its parent container and thus, hopefully, the constraints of a small screen device. The height is added to ensure the aspect ratio of the image is retained.
If your image happens to have a border or padding also then the above code needs a little extra something:

img {box-sizing:padding-box; }

Without setting a value for box-sizing then properties like width and max-width do not accommodate border widths or padding into their measurements. This means the visible width of an image with these properties would be greater than 100% and overflow the constraints of a mobile screen. Adding box-sizing means that where a border and/or padding are specified that all these are included as part of the stated measurement; in this case 100%.

Box Model

If Only Background Images Were so Easy

We use background images for a multitude of purposes ranging from full body backgrounds to icons for links. The latter you wouldn’t expect to be too much of a concern in responsive design and the techniques we use for the former hint at how we can make background images responsive.

When implementing an image in the background of a website we intentionally make this larger to cover as many screen sizes as possible, understanding that those with smaller screens will not see the entire image. It’s this idea that we can use for implementing responsive background images, but first we need to add in another trick to help achieve the right effect; and this is background-size.

Background-size 101

This is one of those new properties gifted to us as part of the CSS3 specification and as is self evident it allows us control over the size of our background image.

The values you can apply to background-size are as follows:

background-size: <bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

Length, percentage and auto should be fairly obvious, but what may not be obvious is that when setting length or percentage values it’s up to the author to ensure the image aspect ratio is maintained, if they so wish.

Cover and contain however are somewhat new and what these do is allow us a way to increase a background image to fill its parent container whilst also retaining the correct image aspect ratio. The differences between the two of these come into how they deal with the overflow. In short using 'cover' allows for overflow and ‘contain’ does not. This diagram shows better how the same image would appear using either cover or contain:

Cover Contain

Using Background-size In Responsive Design

For responsive web design it’s the ‘cover’ value that contains all the power as it will adjust the size of an image to fill a parent element whilst hiding the excess in the overflow; much like we do with large backgrounds in the body of a website.

These two images show how powerful background-size can be in responsive design:

Background Size 1

Background Size 2

Both images show the same page, with the same images, the only difference is the size of the browser. It’s the use of background-size and 'cover' that mean the images are able to adapt to the user screen size and in the case of these images not actually communicate any less information than if the full image was shown.

Much like when making inline images responsive the code is fairly simple:

<ul ><li><span class=" list-img" id="onextrapixel"> Onextrapixel Team</span><h3>Onextrapixel Team</h3><p>Onextrapixel, or more commonly known as OXP is dedicated to delivering useful, comprehensive and innovative information for designers, developers and many others.</p></li></ul>
.list-img {
background-image:url(/img/onextrapixelteam.jpg);
background-position:50% 50%; 
background-repeat:no-repeat; 
display:block; 
height:140px; 
text-indent:-9999px;
-moz-background-size:cover; 
-webkit-background-size:cover; 
background-size:cover;}

#onextrapixel{
background-image:url(/img/onextrapixelteam.jpg);
}

In this example a height is also specified for the element; this is because the effect is trying to fake an inline image. This is so that it we can ensure it is responsive without the image’s height becoming excessive at certain breakpoints. Where an element contains something like text or other child elements the height property may not be required but the effect on the image would not differ.

What is the Support for Background-size Like?

Pretty good actually! Nothing older than Internet Explorer 9 knows what it is of course but you have to go back a few versions in all the other browsers to find one that doesn’t support it either with or without vendor prefixes.
But don’t think the lack of IE support is a bad thing. If you serve a fixed design to these browsers then generating a second version of your image would be the best solution. If you’re adding media query support then ensure the image is at the largest it is likely to be viewed at and as the screen size gets smaller the image will just hide into the overflow. You could even swap the image at various breakpoints if necessary.

Another String to Your Bow

Before responsive web design came along website layouts were getting more and more complex, but for the time being responsive design has hit something of a reset button on this as the rich interfaces we were beginning to create are not as easy to achieve using this technique.

But as we learn more about the process and as CSS becomes even more powerful we will become more familiar with the limits and opportunities of responsive design. As this happens we will be able to design richer interfaces for our responsive websites while also allowing us to enrich the user experience for all our users.