CSS Introduction | Basic CSS Properties | CSS Background

Every HTML element, not only the web page itself, has its own background. CSS background properties let you apply various effects to the background of each element.

CSS background Properties

background-color Property

The background-color property sets the background color of the corresponding HTML element.

<style>
    body { background-color: lightblue; }
    h1 { background-color: rgb(255,128,0); }
    p { background-color: #FFFFCC; }
</style>

background-image Property

The background-image property sets the image to be displayed as the background of the corresponding HTML element. By default, the configured background image is repeated across the entire HTML element.

<style>
    body { background-image: url("/examples/images/img_background_good.png"); }
</style>

background-repeat Property

By default, a background image is repeated both horizontally and vertically. With the background-repeat property, you can make a background image repeat only horizontally or only vertically.

The following example shows horizontal repetition of a background image.

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-x; }
</style>

The following example shows vertical repetition of a background image.

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-y; }
</style>

You can also make the background image appear only once without repeating.

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: no-repeat; }
</style>

background-position Property

The background-position property sets the relative position of a non-repeated background image.

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: top right;
    }
</style>

The keyword combinations available for this property are as follows.

1. left top
2. left top
3. left center
4. left bottom
5. right top
6. right center
7. right bottom
8. center top
9. center center
10. center bottom

You can also specify the relative position directly by using percentages(%) or pixels(px). In this case, the position is based on the top-left corner of the corresponding element.

The following example directly specifies the relative position of a background image in pixels.

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: 100px 200px;
    }
</style>

background-attachment Property

You can use the background-attachment property to fix a positioned background image at that position. The fixed background image does not move from its screen position when scrolling.

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: left bottom;
        background-attachment: fixed;
    }
</style>

Applying background Properties at Once

You can set styles that use all the background properties mentioned above in one line.

<style>
    body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; }
</style>

CSS3 Backgrounds

In CSS3, you can freely set not only the size of the background but also its position. You can also apply multiple background images to a single HTML element.

The background properties newly added in CSS3 are as follows.

Browser Support for CSS3 background Properties

Major browser versions that support CSS3 background properties are as follows. The versions where each browser first supported the feature with a vendor prefix are also shown.

background-size Property

The background-size property sets the size of a background image.

In CSS2, the size of a background image is the actual size of the image used as the background. In CSS3, however, you can freely set the size of the background image.

The syntax of the background-size property is as follows.

background-size: width height contain|cover ;

When specifying the width and height of a background image, use CSS size units. CSS size units include pixels(px), em units, and percentages(%).

<style>
    #origin { background: url(/examples/images/img_monitor.png); background-repeat: no-repeat; }
    #resize {
        background: url(/examples/images/img_monitor.png);
        background-size: 200px 110px;
        background-repeat: no-repeat;
    }
</style>

The background-size value can be either contain or cover.

When set to contain, the image keeps its aspect ratio while being scaled as large as possible. However, the size of the background image does not exceed the content area of the element. Therefore, the background image is always smaller than or equal to the element, and it may not cover part of the element.

When set to cover, the image keeps its aspect ratio while being scaled to cover the entire element. Therefore, the background image is always larger than or equal to the element, and part of the image may be clipped.

The following example shows the difference between background-size values.

<style>
    #contain { background-size: contain; }
    #cover { background-size: cover; }
</style>

You can also use the background-size property to make an image cover the entire element without preserving its original display size.

<style>
    html {  background: url(/examples/images/img_flower.png) no-repeat center fixed;  background-size: cover; }
</style>

background-origin Property

The background-origin property sets the reference area used to determine the position of a background image. This property can use the following three values.

1. border-box: Aligns the background image to the top-left of the border area.
2. padding-box: The default value. Aligns the background image to the top-left of the padding area.
3. content-box: Aligns the background image to the top-left of the content area.

The following example shows the difference between background-origin values.

<style>
    #border { background-origin: border-box; }
    #content { background-origin: content-box; }
</style>

background-clip Property

The background-clip property determines how far the background of an element extends. This property can use the following three values.

1. border-box: The default value. Extends the background to the end of the border area.
2. padding-box: Extends the background to the end of the padding area.
3. content-box: Extends the background only to the content area.

The following example shows the difference between background-clip values.

<style>
    #padding { background-clip: padding-box; }
    #content { background-clip: content-box; }
</style>

background-image Property: Setting Multiple Background Images

The background-image property can set multiple background images on one element.

Each background image is separated by a comma and is stacked in order like a stack. The first image specified appears on top. In other words, the last image specified is placed at the bottom.

The following example uses the background-image property to set multiple background images.

<style>
    #origin {
        background-image: url(/examples/images/img_man.png), url(/examples/images/img_background_good.png);
        background-position: right top, left;
        background-repeat: no-repeat, repeat;
        background-size: 100px 233px, auto;
    }
</style>