Why background-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.  

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:

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?

see more at http://davidwalsh.name/background-size