In HTML, we can easily add the background Image in the Html document which is to be displayed on a web page using the following different two methods:
- Using the Background attribute (Html Tag)
- Using an Internal Style Sheet
Using the Background attribute
If we want to add the background image in the Html document using the Background attribute then we have to follow the steps which are given below. Using these steps, we can easily view an image on a web page:
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the background attribute.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Background image using background attribute
</Title>
</Head>
<Body>
JavaTpoint <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> Step 2: Now, move the cursor within the starting <body> tag in our Html document. And, then type the background attribute as shown in the following block:
<Body background=" "> Step 3: After that, we have to give the path of the image we want to add. So, type the path of the image in the background attribute. If our image is stored in the same directory in which HTML file is stored so type the following path:
<Body background="filename.extension">
<Body background="image.jpg"> <br> If our image is stored in any other directory then type the correct path of that image, so that the browser can read the image easily as described in the following block.
<Body background="/home/sumit/Desktop/images/image.jpg"> If our image is on the internet then we can also add the image by using URL, as given in the following block.
<Body background="https://1.bp.blogspot.com/-sTxAHAxirGM/WVbAe2098nI/AAAAAAABENs/_I5sYMYgLOUzaIE7FfF4qdGX-hoAkq9SgCLcBGAs/s1600/Blog_20170624_113552.jpg"> Step 4: At last, we have to save the Html file or Html Code in the text editor.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Background image using background attribute
</Title>
</Head>
<Body background="https://1.bp.blogspot.com/-sTxAHAxirGM/WVbAe2098nI/AAAAAAABENs/_I5sYMYgLOUzaIE7FfF4qdGX-hoAkq9SgCLcBGAs/s1600/Blog_20170624_113552.jpg">
JavaTpoint <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 output of the above code is shown in the following screenshot:
Using Internal Style Sheet
If we want to add the background image in the Html document using the Internal CSS then we have to follow the steps which are given below. Using these steps, we can easily view an image on a web page:
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Internal CSS option for adding the background image.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Background image using Internal Style sheet
</Title>
</Head>
<Body>
JavaTpoint <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 Internal CSS.
</Body>
</Html> Step 2: Now, we have to place the cursor in the head tag, just after the closing of title tag in the Html document and then define the starting and closing tag of the <style> tag as shown in the following block.
<Head>
<Title>
Add the Background image using Internal Style sheet
</Title>
<style>
........
.........
......
</style>
</Head> Step 3: Now, we have to type the element body in the style tag. And, then type the background-image property as shown in the following block:
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Background image using Internal Style sheet
</Title>
<style>
body
{
background-image:url("https://1.bp.blogspot.com/-sTxAHAxirGM/WVbAe2098nI/AAAAAAABENs/_I5sYMYgLOUzaIE7FfF4qdGX-hoAkq9SgCLcBGAs/s1600/Blog_20170624_113552.jpg");
}
</style>
</Head>
<Body>
JavaTpoint <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 Internal CSS.
</Body>
</Html> Step 4: And, at last, we have to save the Html code in the text editor and run the code. After execution, we will see the image specified in the html document as a background of the web page. The following screenshot provides the output of the above Html code:
