Open In App

How to Add Background Image in HTML?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
17 Likes
Like
Report

Adding a background image to an HTML page can enhance the visual appeal and provide a more immersive experience for your website visitors. The <body> background attribute is used to add a background image in HTML, but this attribute is deprecated in HTML5 and is not in use. In place of the background attribute, the CSS background-image property is used.

Table of Content

Using HTML <body> background Attribute

The <body> background attribute is used in HTML to add a background image. The background attribute uses an image URL or a color code to customize the HTML body element.

Syntax

<body background="image">
    <!-- body content -->
</body>

Example: Adding the body background image using the deprecated background attribute.

index.html 
<body background=
"https://media.geeksforgeeks.org/wp-content/uploads/20241016151154509372/Background-image.png">
    <h1>Background Image with the Help of HTML</h1>
    <p>
        The html body background attribute 
        is used to add background image
    </p>
</body>

Output

output
Output

Note: The HTML <body> background attribute is deprecated in HTML 5. So, you can use CSS background-image property to set background image.

Using CSS background-image Property

The HTML style attribute is used to add CSS styles to HTML element inline. For instance, set the background image of the body using the style attribute, specifing the image URL, and prevent repetition.

Syntax

<element_name style = "background-image: url('Image');"> 
    <!-- Content -->
</element_name>

Example: Setting the background image of the body using the style attribute specifying the image URL.

index.html 
<body style="background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20241016151154509372/Background-image.png');">
    <h1>Background Image using CSS background-image Property</h1>
    <p>
        HTML style attribute is used to add CSS styles to the 
        element. To add background image, CSS background-image 
        property is used.
    </p>
</body>

Output

output
output

Adding Repeated Background Image with CSS

To create a repeated background image, the background-repeat: repeat; will be used.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Repeated Background Image</title>
    <style>
        body {
            background-image: 
url('https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png');
            background-repeat: repeat;
        }
    </style>
</head>
<body>
    <h1>Repeated Background Image using CSS</h1>
</body>
</html>

Output

Output
output

Note: By default, the background image property adds repeated background image.

Adding Non-Repeated Background Images with CSS

To creae a non-repeated background images, the background-repeat: no-repeat; will be used.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Adding Image using CSS background-image property</title>
    <style>
        body {
            background-image: 
url('https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png');
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <h1>Non-Repeated Background Image using CSS</h1>
</body>
</html>

Output

Output
output

How to Add Background Image to a Particular Element with CSS?

To add a background image to specific element, you need to use background-image property on that element.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Background Image to Specific Element</title>
    <style>
        div {
            width: 400px;
            height: 350px;
            background-image: 
url('https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png');
        }
    </style>
</head>
<body>
    <h1>Adding Background Image to Div</h1>
    <div></div>
</body>
</html>

Output

background-image
output


Browser Support


K

kunalmali
Improve
Article Tags :

Explore

Lightbox