Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 20 Aug, 2021
Geek Week

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :