Treehouse

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.

ydkjs-1.png

Recent Features

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • 5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • Send Email Notifications for Broken Images Using jQuery AJAX

    It's usually best to repair broken image paths as soon as possible because they can damage a website's credibility. And even worse is having a user tell you about it. Using jQuery and PHP, you can have your page automatically notify you of broken...

  • Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

    There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and...

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.

  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?)

  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.

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