HTML Tutorial
HTML Attributes
- html-global-attributes
- html-event-attributes
HTML Tags List
HTML5 Advance
HTML API
HTML Color Names
- html-color-names
HTML Misc
MCQ
- html-mcq
Interview Questions
- html-interview-questions

How to add Background Image in Html

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

Note: HTML 5 does not support the background attribute of tag, so we have to use the internal CSS option for adding the background in the Html document.

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 tag in our Html document. And, then type the background attribute as shown in the following block:

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:

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.

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>

    

Test it Now

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

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:

Next TopicHow to Convert Html to PDF

← prev next →