CSS3 Backgrounds and Regular Expressions (Part 2)

Jul 12, 2010
Episode 32
In this week's episode, Nick shows you several new CSS3 background tricks and Jim dives deeper into regular expressions.
Spotlight

Thanks to those who make Doctype possible!

Backgrounds in CSS3

CSS3 brings a bunch of new properties that allow you to fine tune your backgrounds more easily. Perhaps the coolest thing is that you can now have multiple backgrounds!

Multiple Backgrounds

In order to apply multiple backgrounds to a page element, you simply use the background property like you normally would. After you’ve typed out your first background, you can then add a comma, and type out the arguments for a second background.

Using a comma separated list of backgrounds, you can build up several layers of imagery. The first background in the list will be at the top of the stack, in the foreground, the second layer will be rendered behind it, and so on.

If you’re using the individual properties instead of the consolidated background property, you need to pay attention to the order of your arguments.

For example, let’s say you used the property background-image, and had a comma separated list of values for multiple backgrounds. Then you used the background-repeat property, and had a comma separated list of repeat values. The first background-image value corresponds to the first background-repeat value, the second background-image value corresponds to the second background-repeat value, and so on. If you have any extra values at the end that don’t have a corresponding set of values, they are ignored.

One example usage where multiple backgrounds are really useful is if you want to have one background be repeated, and another background that’s centered on the page. To do this without multiple backgrounds, you would need to create two separate divs nested inside one another.

Background Sizing

Multiple backgrounds are pretty useful, but there’s another CSS3 background property that can help you resize your backgrounds independent of the element that they’re being applied to.

The background-size property allows you to scale backgrounds just like you would a normal image.

The first argument determines the width of the background, and the second argument determines the height. If no value is specified, background-size uses the default value of “auto” which is how backgrounds normally behave in CSS1 and 2. If pixel values are given for the X and Y arguments, then the background will be constrained to that exact size. If percentage values are given, then the background will fill a certain percentage of the element. For example,

background-size: 100% 100%;

would stretch out a background to be the exact same width and height of the element.

Another neat thing about background sizing, is that instead of using X and Y values, you can just use the constants “cover” or “contain.” Both constants will preserve the original aspect ratio of the image. When you use “cover” the background image will fill up the background of the element, even if that means some of the image is clipped off. If you use “contain” the image will be scaled down so that it can be as large as possible, while still being completely contained inside the edge of the element.