Loading...

CSS3 has afforded us more options when we use background images.

CSS versions before CSS3 included the capability of adding colors and images as background to HTML container elements, including the entire web page itself. There are also options to decide where in the container a background image would be positioned and how it repeats (or doesn't). But CSS3 has created more ways to work with our backgrounds.

We can include multiple background images by using the typical background-image property, but just including multiple image URLs simply separated by commas. In fact, this same approach can be taken with any other background sub-properties. If you include multiple values separated by a comma, each unique value will be applied to the corresponding background image in the same order. But you don't have to do this every time. If you don't need a sub-property to have a unique value for each image, add one value and it'll automatically be applied to all of your background images.

<style>
div {
background-image:url(foam-finger.png), url(raccoon.png);
}
</style>

<div></div>

CSS3 also lets us control the size of our background images by using the background-size property. The size of an image used as a background could get frustrating as you would need to change the dimensions used in the file itself, so you would always need to make sure you kept a larger-sized copy in case you went too small. And if you want to use the same background for different containers, you have the option to use the same source file, but use different sizes in each container instead of including multiple file copies. Background-size's values are represented by one entry for width, and one for height. If you know what you want one dimension to be, you can use "auto" for the other to keep the image in proportion.

<style>
div {
background-size:100px auto, auto 200px;
background-position:0px 0px, 50px 5px;
}
</style>

<div></div>

We can now take even more control over in what part of a container a background begins and where it is restricted to. This situation is especially noticeable with a repeating background image or with a background color. By default, a background covers a container's content area and padding area (if any padding is used). The background-origin and background-clip properties, however, give us the option of restricting this to only the content area, or extending it to even include the border area (again, if a border is used). Background-origin dictates where a background will start from, and background-clip decides where a background is allowed to extend to.

<div style="background-origin:border-box"></div>

<div style="background-origin:padding-box"></div>

<div style="background-origin:content-box"></div>

<div style="background-clip:border-box"></div>

<div style="background-clip:padding-box"></div>

<div style="background-clip:content-box"></div>
Here is a div with a background image originating from the border-box.
Here is a div with a background image originating from the padding-box.
Here is a div with a background image originating from the content-box.
Here is a div with a background image being clipped off at the border-box.
Here is a div with a background image being clipped off at the padding-box.
Here is a div with a background image being clipped off at the content-box.