In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > background

background property

Browser support:

Specifies up to five separate background properties, in a shorthand form.

With this property, you can set the background color and / or image of any visible HTML element. Furthermore, you can set how the background image is displayed. You have control over how the background image behaves if the contents of the element are scrolled (stays in a fixed position, or scrolls with the contents, as it normally does). You can also set how the image should be repeated (repeats vertically, horizontally, both, or in neither direction).

These features can also be set with five different style properties, listed below. The use of separate properties is highly recommended for non advanced authors for better controllability.

JavaScript page for this property: background. You can find other example(s) there.

Possible values:

One of the following values:

•

Any of the following values (use the space character to separate them, each value can be used only once):

•	<background-color>
•	<background-image>
•	<background-position>
•	<background-repeat>
•	<background-attachment>

•

inherit

Description of values:

background-attachment

Specifies whether the background-image should scroll with the contents of the object or not.

background-color

Specifies the color to use for the background of the object.

background-image

Specifies the image to use as the background of the object.

background-position

Sets the position of the background-image within the element.

background-repeat

Specifies how to tile the background-image relative to the upper-left corner of the container object.

inherit

Takes the value of this property from the computed style of the parent element.

Default: transparent none repeat scroll 0% 0%.

Example HTML code 1:

This example illustrates the use of the background property:

<head>
    <style>
        .example1 {
            background: #F9F9F9 url("picture.gif") no-repeat center bottom;
            width: 300px;
            height: 120px;
        }

        .example2 {
            background-color: #F9F9F9;
            background-image: url("picture.gif");
            background-repeat: no-repeat;
            background-position: center bottom;
            width: 300px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="example1">The background image is at the center bottom of this division.</div>
    <div class="example2">This is the same, but without shorthand background property.</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to create a gradient background. First you need to create an image in a painting program. In most cases, the image can be very slim (it may even be 1 pixel wide).

<head>
    <style>
        .gradient {
            background-image: url("gradient.gif");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div class="gradient">
        Division element with
        <br />
        gradient background.
    </div>
</body>