How to Set Background Image in HTML Table ?

Last Updated : 24 Apr, 2025

Setting a background image in an HTML table can enhance the visual appeal of your webpage. In this article, we will discuss two methods to set a background image in an HTML table i.e. using inline CSS and external CSS.

Set Background Image in HTML Table using Inline CSS

In this approach, we directly apply the CSS style to the <table> tag using the style attribute.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Background Image in Table</title>

    <style>
        table {
            margin: auto;
        }

        table, tr td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table style="background-image: url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'); width: 400px; height: 200px;">
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </table>
</body>

</html>

Output

table-background-image

Explanation

The background-image property is used to set the image as the background of the table.
The url() function is used to specify the path of the image file.
The width and height properties are used to set the size of the table.

Set Background Image in HTML Table using External CSS

In this method, we use an external CSS file to style the table. This approach is more maintainable and scalable.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Background Image in Table</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <table class="background-table">
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </table>
</body>

</html>

CSS

/* Filename: style.css */

table {
    margin: auto;
}

table, tr td {
    border: 1px solid black;
}

.background-table {
    background-image: url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png');
    width: 400px;
    height: 200px;
}

Output:

table-background-image

Explanation

The .background-table class is defined in the external CSS file styles.css.
The background-image property is used to set the image as the background of the table.
The width and height properties are used to set the size of the table.
The class is applied to the <table> tag in the HTML file.

How to insert Background Image in HTML From Local Folder ?

vkash8574

Improve

Article Tags :

How to Set Background Image in HTML Table ?

Set Background Image in HTML Table using Inline CSS

Explanation

Set Background Image in HTML Table using External CSS

Explanation

Similar Reads

Thank You!

What kind of Experience do you want to share?