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

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:
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("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: 
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("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:
image 3
Note: Please write comments if you find anything incorrect, or you want to share more info about the topic discussed.
HTML-Attributes
HTML-Questions
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Angular File Upload
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array