O'Reilly

background-size Matters

By on  

CSS background-size

It's something that makes all men live in fear, and are often uncertain of. It's never spoken, but the curiosity is always there. Nine out of ten women agree in the affirmative. Advertisers do their best to make us feel inadequate but tell us it can improve. Yes gentlemen...it appears that size matters.

background-size, that is. The background-size CSS property allows developers to designate the size at which a background-image should appear within an element. MooTools Developer Christoph Pojer employs the background-size technique on his website, allowing for his masthead to look "full" on browsers of all sizes, even mobile. Let's look at how to use the mystical background-size property.

background-size CSS

The background-size property has a few predefined values and then the usual numeric-based values:

  • contain: Ensures that the entire background-image will display by showing the image at a scaled size.
  • cover: Scales the background image so that the smallest dimension reaches the maximum width/height of the element.
  • length/percentage: Any custom numeric size

Believe it or not, the fun part is assigning the length and percentage sizes. Here are some examples of the different usages of background-size:

/* base header classes */
#header {
	/* header dimension! */
	height: 350px;
	
	/* additional background properties */
	background-repeat: no-repeat;
	background-position: center center;
	
	/* some box shadow for good fun */
	box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
}

/* cover */
#header.flex {
	/* size matters */
	background-size: cover;
}

/* contain */
#header.flex {
	/* size matters */
	background-size: contain;
}

/* flex, fun */
#header.flex {
	/* size matters */
	background-size: 100% auto;
}

Christoph's website uses the last example, allowing for a great view of the JavaScript fanboy at all browser sizes. Check out my demos to see

The subtle awesomeness provided by using background-size is somewhat amazing. I'm usually quite skeptical of window size and resize effects but this technique helped me to see the value and ease in working with fixed dimensions and variable effects based on client browser size. background-size is supported in Firefox, Safari, Chrome, Opera, and IE9+.

What do you think about this technique -- neat trick or useful tool? Would you use this on your personal website? How about a business website?

Photos featured in this post were taken in London during the MooTools Hackathon.

Track.js Error Reporting

Recent Features

  • 6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

  • Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event,...

Incredible Demos

  • Comment Preview Using MooTools

    Comment previewing is an awesome addition to any blog. I've seen really simple comment previewing and some really complex comment previewing. The following is a tutorial on creating very basic comment previewing using MooTools. The XHTML You can set up your XHTML any way you'd like....

  • From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

Discussion

  1. You are the God of CSS!
    Thanks for this post :)

  2. CSS3 I suppose?

    What I liked on Chris’ site is how the text boxes repacked as the page got narrower.

  3. Thanks for the great article. Not a lot out there that covers the background-size property. Nice to see it used in real situations.

  4. The noob

    Does not work for me on IE6 sp2, you are a liar. Shame on you.

    Thank you anyway.

    • The post says IE9!

    • Wayne

      Incredible, isn’t it? Seems like the noob didn’t read the post!

  5. This property is great but use it with caution, it can slow down the rendering considerably. I was wondering why my animation was so laggy and it turned out it was just this feature—if you think about it, the browser has to resize the image at every redraw (WebKit doesn’t seem to cache the resized image)

  6. Especially if you want create some background-patterns based on CSS3 you need the property background-size.

  7. dwfresh

    hi, so i didn’t see a difference between
    ‘background-size: 100% auto’ and ‘cover’ ??
    Is there a diffference ?
    thanks for the cool article.

  8. cashdollar

    what the hell is the difference between 100% auto and cover? It’s exactly the same in Chrome.

  9. I’m also trying to figure out the difference between 100% auto and cover?

    Great technique though. I’m using it at the new design of my site. Clearly it can be useful for both professional sites and personal.

    Thanks for the write up!

  10. Okay, so I discovered the difference between “100% auto” and “cover”. The “100% auto” value will simply set the size of the image to 100% of the parent element on the specified axis, and “cover” will make sure that the whole parent element is filled with the background image.

  11. Stan Rogers

    The difference between “100% auto;” and “cover” is that cover means “100% auto OR auto 100%, depending on which dimension you need to adjust, okay?;” (which is not a valid CSS value entry).

  12. I just stumbled across the Webkit performance issue too. Adding this to the element with the background image seems to really help performance.

    -webkit-transform: translate3d(0,0,0);

  13. I’d discover this technique early May, but it’s kinda useless if your client demands LTE IE8, plus if you use it in combination with transparent images, it doesn’t come out as nice as you might wish because of the scaling.

    I’d rather see a fix for LTE IE8, I was working on this but so far no cure found… If someone has come across a fix, please share :P

  14. Hi,

    This is a great overview of the background-size property.
    I’ve implemented a polyfill that implement “background-size: cover;” and “background-size: contain;” in IE8: https://github.com/louisremi/background-size-polyfill

    Give it a try!

  15. If you’re unsure stick to “cover” and not “100% auto” ::: cover does what it “says” it covers the screen ( forces ) Width & Height 100% not only Width 100% :::

  16. IE8-supporting fans of background-size: cover; rejoice!


    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[image path]', sizingMethod='scale');

  17. Jordan

    Absolute Legend!!!! thank you soo much mate!

  18. Arild Orholm

    This is a great way of understanding the background-size tag, thanks a bunch. Ended up using a @media (max-width) { body-tag with cover to get some responsiveness from the site I am working on, works great!

  19. Jacob

    Hey, this is great!
    Question: Any idea how to dynamically remove a background image and replace with a color if the browser hits a minimum width? (ie: with Mobile devices?)

    • Google CSS Media queries: you run different CSS based on the pixel width of the device.

  20. Is there possibility to set background canvas size instead of image. When using sprite images, sometimes when content height goes higher than expected another image from the sprite is visible. So if we can set max canvas size that would be gold.
    Thanks.

  21. For those who question the difference between 100% auto and cover: try 50% or anything else but 100% and see the difference.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...