How To Insert Background Image In HTML Using Notepad
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Ashish
In this tutorial we will show you the solution of how to insert background image in html using notepad, when inserting a image as a background we needs to concentrate on cover the entire view of page and its must be static, without repeat.
So, here show you how to implement the concept of inserting background image.
Step By Step Guide On How To Insert Background Image In HTML Using Notepad :-
As we know, in html when inserting a image into webpage needs to use <img> tag and cover the edges because its background image.
In <img> tag not having any closing tag and have two attributes namely src and alt.
Src attribute is used for collect the path of image. Alt attribute is short description about the image, Somehow whether this image not loaded during runtime this alt tag description will shown to the user.
<!DOCTYPE html> <html> <head> <title> Background image displaying using Notepad </title> </head> <body> <img src="background.jpg" alt="background image" style="width:100%;height:100%;"> </body> </html>
- <!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 some websites when need to use external files those links are declared here. <title> tag is used for set the webpage title.
- 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.
- Already we discussed about <img> tag used for display image on website. In <img> tag have two attributes src and alt, src attribute contains information about PATH of the image. alt in the sense of alternate name for the image.
- When giving path to src attribute it must be correct location because it leads to failed to load image on website. Then alt attribute name needs to describe about the image which is used to user can get idea about it.
- In <img> tag we can set width and height without use of style also, the result will be same on the website.
- (i.e) <img src="background.jpg" alt="background image" width="100%" height="100%">
- When setting one image as a background we need to cover up to edges, that’s way here we are setting the height and width to 100%. So it covers 100% of view on website.
- 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 tutorial on how to insert background image in html using notepad helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion we are able to insert background image in html using notepad. This is just a one line code will surprisingly solves your problem now we can understand the difference from normally displaying images on webpage.
It’s a important topic also because most of website we can see the front page will definitely have background images as a banner. I hope this tutorial will helps you.
About Ashish
