Using CSS Background-size Responsively

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.

Kean Richmond has been working as a Web Designer and Developer since 2006 after graduating with a BSc in Web Development. He strives to design and build creative and visually appealing websites that are of standards compliant and search engine friendly.

Comments

  1. / Reply

    Thanks for this informative article, Kean.

    • mystrdat,
    • March 3, 2012
    / Reply

    Nice info, but do you have a good reason to put block elements inside an inline span? I would doubt you do.

    • mystrdat,
    • March 3, 2012
    / Reply

    ^ Disregard the above comment please, I made a wrong copypaste.

  2. / Reply

    I do like the background-size property, but using it for this feels a bit weird to me. Those images belong to the content, so they need to be in the HTML and not in the CSS.

      • Kean,
      • March 4, 2012
      / Reply

      So long as the text communicates the information visible in the image there’s no negative impact that I can see by having the image in the CSS instead of the HTML.

      You could always replace the text in the span with an image if this provided a better fallback.

  3. / Reply

    Very timely, was just about to investigate how to use CSS sprites (ie background images) with responsive design. Thank you.

    • Cap,
    • March 6, 2012
    / Reply

    I do like the background-size property, but using it for this feels a bit weird to me. Those images belong to the content, so they need to be in the HTML and not in the CSS.

  4. / Reply

    Valuable article, thanks for sharing.

  5. / Reply

    Nice. Background images, especially large images, are often completely overlooked in otherwise fluid designs.

    • Justin,
    • March 13, 2012
    / Reply

    Thanks for the great article! Unfortunately, I’m wrestling with understanding the height of the Onextrapixel background image in your Background-Size example. If you’ve specified “span.list-img” to be 140px height, shouldn’t it have the same 140px height in both the top and bottom examples? Why is the Onextrapixel image height rendered differently in each example if it has a fixed, pixel-based height? Thanks!

    • Kean,
    • March 15, 2012
    / Reply

    @justin apologies, the images are not a pixel perfect representation, that’s a massive oversight on my part.

    Hopefully you’ll believe me when I say that the original examples were a fixed height and that the images on this post were re-sized to show all three columns, rather than having to crop them to fit this post.

  6. / Reply

    what you have said in this article has deeply impressed me and i wish you can write more about this subject.

    • jay,
    • August 16, 2012
    / Reply

    Thank you very much for sharing the knowledge.

    • Mac,
    • January 15, 2013
    / Reply

    Nice one bro, helped a lot.

    • junaid,
    • February 18, 2013
    / Reply

    Thanks Bro, it was very helpful.

  7. / Reply

    You mention using responsive sprites inline, but in my own personal experience, I’ve had a lot more issues when I need a BLOCK element to have a css background image. I’ve come up with a solution that I think works pretty well, I’ve got a working example of it at my blog here: http://blog.brianjohnsondesign.com/2013/how-to-use-responsive-background-image-sprites-css-tutorial/

    Basically if you had a div, and you wanted its background image to be responsive, you would just apply this css to that div:

    width: 20%;
    height: 0;
    padding-bottom: 20%;
    background-image: url(“images/ourimage.png”);
    background-position: 0 0;
    background-size: 200%;
    display:block;

    And that’s pretty much it! Obviously it would need to be adjusted as needed, but that should do the trick!

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.