How to add an image as background image of a web page ?

Last Updated : 20 Aug, 2021

In this article, we will be adding an image as the background image of a web page. Background images are used to make a website more interactive and attractive. It can be applied in many stylings.

Approach:

In the body tag, specify a background image in the background attribute by passing the URL of the image or location path.
Adding CSS styling properties.

Syntax:

<body background = "URL or path" > Website Body </body>

Example 1: In this example, we will be going to add the background image using the above approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Website</title>
</head>

<body background=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
    <h1>GeeksforGeeks</h1>
    <h2>Background Image</h2>
</body>

</html>

Output:

Example 2: In this example, we will specify the URL or path of the image in CSS code by using background-image property.

Syntax:

<style>
    body {
        background-image:url(" URL of the image ");
    }
</style>

Note: We can also add CSS code under style tag or we can create separate file.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Website</title>

    <style>
        body{
            background-image:url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>Background Image</h2>
</body>

</html>

Note: We will get the same output as we got in Example 1.

Now we will understand how to give styling to the background image using CSS properties.

1. Background-repeat: The background-repeat property is used to add or remove repetition of the background image in any direction.

Syntax:

background-repeat: no-repeat;

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Website</title>

    <style>
        body{
            background-image:url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>Background Image</h2>
</body>

</html>

Output:

2. Background-attachment and size: The background-attachment property is used to specify the kind of attachment of the background image with respect to its container. The background-size property is used to set the size of the background image.

Syntax:

background-attachment: fixed; 
background-size: cover;

Example: We are specifying this to fix because we don't want the background image to scroll with the page. We set background-size to 100% for height and 100% for width to cover the whole screen.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Website</title>

    <style>
        body{
            background-image:url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
            background-repeat: no-repeat;
            background-attachment: fixed; 
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>Background Image</h2>
</body>

</html>

Output:

Note:

How to Add a Background Image in Next.js?

anuragsingh1022

Improve

Article Tags :

How to add an image as background image of a web page ?

Similar Reads

Thank You!

What kind of Experience do you want to share?