How To Add Background Image In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Anjali
In this article we will show you the solution of how to add background image in HTML, the following two different methods can be used in HTML to add a background image to a document for displaying on a web page:
- In HTML tags, you can use the Background attribute
- A style sheet for internal use
There are several ways to add images to a website to make it more interesting and appealing. An example of such a method is the addition of a background image.
The purpose of this blog is to teach you how to add background images to websites using HTML and CSS.
It is most common and straightforward to add a background image through the background image attribute of the body tag.
In spite of HTML's simplicity, you should practice writing HTML code until you feel confident. Front-end developers must also be proficient with HTML in order to advance in their careers.
It is important to understand before getting started with HTML that it is not a programming language since it does not use loops or conditional statements.
Step By Step Guide On How To Add Background Image In HTML :-
<!Doctype Html> <Html> <Head> <Title> Add the Background image using background attribute </Title> </Head> <Body talkerscode.jpg"> TalkersCode <br> Html Tutorial <br> This page helps us to understand how to show the backround image of a web page. <br> <br> And, this section helps you to understand how to add the background image in an Html page using the background attribute. </Body> </Html>
- The first step is to open the HTML file in the text editor where we want to use the background attribute or type the HTML code into any text editor.
- In our HTML document, place a pointer within the starting body tag. You will then need to type the background attribute.
- In the next step, we must enter the path to the image we wish to add. The background attribute should be filled with the path to the image. You will need to type the path to our image if it is located in the same directory as the HTML file: <Body background="filename.extension">
- Our last step is to save the HTML file or HTML code in the text editor.
Conclusion :-
Websites and blog posts are more appealing and understandable when they contain images.
When there are no images on a blog or website, readers begin to drift away, and the blog or website becomes boring.
In addition to their visual impact, background images can have a significant impact on the interactivity of a web page.
I hope this article on how to add background image in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
