How to add an image as background image of a web page ?
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
Website
GeeksforGeeks
Background Image
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.
Output:
image 3
Note:
Last Updated :
20 Aug, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...