background-size Matters
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.
You are the God of CSS!
Thanks for this post :)
CSS3 I suppose?
What I liked on Chris’ site is how the text boxes repacked as the page got narrower.
Thanks for the great article. Not a lot out there that covers the background-size property. Nice to see it used in real situations.
Does not work for me on IE6 sp2, you are a liar. Shame on you.
Thank you anyway.
The post says IE9!
Incredible, isn’t it? Seems like the noob didn’t read the post!
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)
Great tip Federico!
Especially if you want create some background-patterns based on CSS3 you need the property background-size.
hi, so i didn’t see a difference between
‘background-size: 100% auto’ and ‘cover’ ??
Is there a diffference ?
thanks for the cool article.
what the hell is the difference between 100% auto and cover? It’s exactly the same in Chrome.
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!
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.
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).
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);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
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!
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% :::
IE8-supporting fans of background-size: cover; rejoice!
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[image path]', sizingMethod='scale');
Absolute Legend!!!! thank you soo much mate!
This is a great way of understanding the background-size tag, thanks a bunch. Ended up using a
@media (max-width)bodytag with cover to get some responsiveness from the site I am working on, works great!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.
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.
For those who question the difference between
100% autoandcover: try50%or anything else but100%and see the difference.Also great for creating hi-res background images on retina screens i.e. create an image twice the size you wish to display and set the background-size to half the width of your image.
This isnt the first time David Walsh has gotten me out of a tough situation. Love your work make! Keep on keepin’ on!
Thank you for sharing this resource!
background-size: 100% auto;did the trick and got my background wrap working perfectly on mobile.The last snippet “100% auto” did the trick for me. Very useful for slider section! Thanks for sharing.
One of the things I had to learn the ‘hard’ way – thanks David :-)
You are a majestic CSS expert. Thanks, David
You are always coming in clutch. Thanks sir!