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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > background (table, td, th)

background property (table, td, th)

Browser support:

Sets or retrieves the background picture, which will be tiled if it is smaller than the object's dimensions.

This property is deprecated. Use the background style property instead: 'table {background: url(bg.jpg);}'.

Syntax:

object.background;

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

This property is read/write.

HTML page for this property: background

Possible values:

String that sets or retrieves the URL of the picture. It can be an absolute or relative path as well. Relative paths are relative to the base URL. The base URL is the location of the current document, but it can be overridden by the base tag.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the background attribute:

<table id="myTable" border="1px" background="bg.jpg">
    <tr>
        <td>Apple</td>
        <td>Pear</td>
        <td>Peach</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:

<table id="myTable" border="1px" style="background-image:url(bg.gif);">
    <tr>
        <td>Apple</td>
        <td>Pear</td>
        <td>Peach</td>
    </tr>
</table>

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:

<head>
    <script type="text/javascript">
        function ChangeBg () {
            var table = document.getElementById ("myTable");
            table.background = "gradient.gif";
        }
    </script>
</head>
<body>
    <table id="myTable" border="1px" background="bg.jpg">
        <tr>
            <td>Apple</td>
            <td>Pear</td>
            <td>Peach</td>
        </tr>
    </table>

    <button onclick="ChangeBg ();">Change the background image!</button>
</body>