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

You are here: Reference > JavaScript > client-side > style handling > properties > background

background style property

Browser support:

Specifies or returns 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.

If you want to get background features from JavaScript, for cross-browser functionality, use the five stand-alone properties. To set, you can use all six properties.

Syntax:

object.background;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: background

Possible values:

The type of this property is string.

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 or returns whether the backgroundImage should scroll with the contents of the object or not.

background-color

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

background-image

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

background-position

Sets or retrieves the position of the backgroundImage within the element.

background-repeat

Specifies or returns how to tile the backgroundImage 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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the background property in JavaScript:

<head>
    <style>
        .example {
            background: #F9F9F9 url("picture.gif") no-repeat center bottom;
            width: 300px;
            height: 200px;
        }
    </style>
    <script type="text/javascript">
        function ChangeToGreen (elem) {
            elem.style.background = "green";
        }
    </script>
</head>
<body>
    <div class="example" onclick="ChangeToGreen (this)">Click this division</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to create a roll-over effect in JavaScript:

<head>
    <style>
        .normal {
            background-color: #FFE4E3;
            border: 1px solid #CCCCCC;
        }

        .over {
            background-color: #237765;
            border: 1px solid #CCCCCC;
            color: #FFFFFF;
        }

        .down {
            background-color: #FF0000;
            border: 1px solid #237765;
            color: #FFFFFF;
        }
    </style>
    <script type="text/javascript">
        function ChangeClass (button, cls) {
            button.className = cls;
        }
    </script>
</head>
<body>
    <button class="normal"
            onmouseover="ChangeClass (this, 'over');" 
            onmouseout="ChangeClass (this, 'normal');" 
            onmousedown="ChangeClass (this, 'down');" >
        Hover or click this button!
    </button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 5:

This example shows how to change different background properties easily in JavaScript:

<head>
    <style>
        .example {
            background: #F9F9F9 url("picture.gif") no-repeat center bottom;
            width: 300px;
            height: 120px;
        }
    </style>
    <script type="text/javascript">
        function ChangeBg (type, elem, posID) {
            
            var divToChange = document.getElementById ("myDiv");
            var newValue = elem.options[elem.selectedIndex].text;
            
            switch (type) {
                case "color":
                    divToChange.style.backgroundColor = newValue;
                    break;
                case "repeat":
                    divToChange.style.backgroundRepeat = newValue;
                    break;
                case "position":
                    var otherPosElem = document.getElementById (posID);
                    var otherValue = otherPosElem.options[otherPosElem.selectedIndex].text;
                    
                    divToChange.style.backgroundPosition = (newValue + " " + otherValue);
                    break;
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" class="example">Click this division</div>

    <table border="1px">
        <tr>
            <td>Change Color:</td>
            <td>
                <select onchange="ChangeBg ('color', this)" size="3">
                    <option selected="selected" />#F9F9F9
                    <option />red
                    <option />green
                </select>
            </td>
        </tr>
        <tr>
            <td>Change repetition type:</td>
            <td>
                <select onchange="ChangeBg ('repeat', this)" size="4">
                    <option selected="selected" />no-repeat
                    <option />repeat
                    <option />repeat-x
                    <option />repeat-y
                </select>
            </td>
        </tr>
        <tr>
            <td>Change vertical position:</td>
            <td>
                <select id="vert" onchange="ChangeBg ('position', this, 'hor')" size="3">
                    <option />top
                    <option />center
                    <option selected="selected" />bottom
                </select>
            </td>
        </tr>
        <tr>
            <td>Change horizontal position:</td>
            <td>
                <select id="hor" onchange="ChangeBg ('position', this, 'vert')" size="3">
                    <option />left
                    <option selected="selected" />center
                    <option />right
                </select>
            </td>
        </tr>
    </table>
</body>