How To Add Background Image In HTML Using CSS
Last Updated : Mar 11, 2024
IN - HTML CSS | Written & Updated By - Riya
In this tutorial we will show you the solution of how to add background image in HTML using CSS, CSS means Cascading Style Sheet and we can use css in three type of ways that is Inline, Internal CSS, External CSS.
Here we will see how to use external css file for style the html document. External file means separate file with CSS code.
CSS have more number of properties for styling a particular element.
Step By Step Guide On How To Add Background Image In HTML Using CSS :-
In css for styling a element we to have use background-image property for set the background. Here we are adding image to the body element.
As we know when adding image as a background we needs to concentrate on cover the entire view of page and its must be static, without repeat.
So we are going to use two more properties for that (i.e) background-position, background-repeat.
<!DOCTYPE html>
<html>
<head>
<title>
Background image displaying using css
</title>
<!--we are used external css file for set the background image-->
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
</body>
</html>
CSS
body{
background-image: url(./background.jpg);
background-repeat: no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Create separate file for the CSS code save it with same location of HTML document.
- Here, we used external css file for style purpose so we use <link> tag to link the file to HTML document.
- rel attribute indicates relation of the file
- href attribute contain path information of the file
- type attribute indicates the file’s type.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- With the help of external css file we can set the image as body background. In css background-image property collects the path of the image.
- Background-repeat property value no-repeat is we used for avoid the duplication of the image occurrence and we can set it to other values also
- (i.e.) Repeat – allows duplication, Repeat-X –allows duplication in horizondal side only its reverse type value is Repeat-Y.
- When using 100% of width and height it will show actual scale of the image. Background-position property sets the position of image, here we are set to cover overall page so the property value is COVER.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
I hope this article on how to add background image in HTML using CSS helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion now we are able to add background image in html using css and how to implement the concept to achieve the result.
Already we know every websites index page will have banner image it’s a first thing to attract every users.
So we need to understand the importance of this topic. I hope this guidance will helpful for everyone.
About Riya
