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

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

backgroundColor style property

Browser support:

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

With the backgroundColor property you can set the background color of an element and you can also set the element's background to transparent.

Transparency is allowed by default for frame elements (frame and iframe) in all commonly used browsers, except in Internet Explorer before version 9. In Internet Explorer before version 9, use allowTransparency property to allow a frame element to be transparent.

Syntax:

object.backgroundColor;

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

This property is read/write.

CSS page for this property: background-color

Possible values:

The type of this property is string.

One of the following values:

color

Color of the background. For the supported color values, see the colors page.

inherit

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

transparent

Default. Underlying content will shine through.

Default: transparent.

Example HTML code 1:

This example illustrates the use of the background-color property:

<head>
    <style>
        .example {
            background-color: #FF0000;
            width: 300px;
            height: 200px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="example">
        Some content ..... <br /> ..... <br /> ..... <br />
        Some content ..... <br /> ..... <br /> ..... <br />
        Some content ..... <br /> ..... <br /> ..... <br />
        Some content ..... <br /> ..... <br /> ..... <br />
    </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 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 3:

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

<head>
    <script type="text/javascript">
        function ChangeBgColor (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");
            div.style.backgroundColor = selectState;
        }
    </script>
</head>
<body>
    <div id="myDiv">Change the background-color</div>

    <select onchange="ChangeBgColor (this);" size="8">
        <option selected="selected" />white
        <option />red
        <option />cyan
        <option />blue
        <option />green
        <option />yellow
        <option />purple
        <option />black
    </select>
</body>