Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 20 Aug, 2021
Improve Article
Save Article

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=
    <h1>GeeksforGeeks</h1>
    <h2>Background Image</h2>
</body>
  
</html>

 

Output:

image 1

 

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(
        }
    </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(
            background-repeat: no-repeat;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Background Image</h2>
</body>
  
</html>

Output: 

image 2

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(
            background-repeat: no-repeat;
            background-attachment: fixed; 
            background-size: 100% 100%;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Background Image</h2>
</body>
  
</html>

Output:

image 3

Note: Please write comments if you find anything incorrect, or you want to share more info about the topic discussed.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!