HTML Background Image

The <background> property within an HTML file is applied for defining the background image of an HTML page or a table. By assigning the path of an image as the value of the background attribute, you can determine the image displayed on your HTML page or table.

Syntax

Example


<tag background="Path_of_an_image">

Note: The Background attribute is not supported in HTML5. Use the following syntax of CSS:

Example


<tag style="background-image:Path_of_an_image)">

Illustrations: Below, you'll find demonstrations of setting the background image using various styles:

In this instance, the utilization of the background attribute with the body tag is demonstrated to showcase an image as the background of the webpage.

Example


<!DOCTYPE html>

<html>

<head>

<title> 

Example of Background image

</title>

</head>

<body background="https://previews.123rf.com/images/kotenko/kotenko1403/kotenko140300008/26854631-snowy-winter-in-a-mountain-forest-sunny-cold-day-with-snow-covered-trees-carpathian-mountains-ukrain.jpg">



<font color="red">

<h1> click on this <a href=""> link </a> for the Home page of Our Website </h1>

</font>

</body>

</html>

Output:

Illustration 2: In this instance, the background attribute is utilized in conjunction with the table tag to exhibit an image as the background of an HTML table.

Example


<!DOCTYPE html>  

<html>   

<head>  

<title>  

    Example of Background image 

</title>  

</head>  

<body>

<center>



In this example, we use the background attribute with the table tag, which displays the image as a background of the HTML table. 



<table background="https://images.pexels.com/photos/237272/pexels-photo-237272.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" height="300" border="1" width="500">

 

	<tr>

		<td> Roll No. </td>

		<td> Name </td>

	</tr>

	<tr>

		<td> 101 </td>

		<td> Abhay </td>

	</tr>

	<tr>

		<td> 102 </td>

		<td> Chetan </td>

	</tr>

	<tr>

		<td> 103 </td>

		<td> Manpreet </td>

	</tr>

	<tr>

		<td> 104 </td>

		<td> Rakesh </td>

	</tr>

	<tr>

		<td> 105 </td>

		<td> Sumit </td>

	</tr>

</table>

</center>  

</body>  

</html>

Output:

Illustrative Example 3: In this instance, the CSS syntax is applied to the background-image property within the style attribute, specifically targeting the body tag.

Example


<!DOCTYPE html>  

<html>   

<head>  

<title>  

    Example of Background image 

</title>  

</head>  



<body style="background-image:url('https://previews.123rf.com/images/kotenko/kotenko1403/kotenko140300008/26854631-snowy-winter-in-a-mountain-forest-sunny-cold-day-with-snow-covered-trees-carpathian-mountains-ukrain.jpg');"> 



<font size="4" color="green">



In this example, we use the <b> background-image </b> property in the <b>style</b> attribute with the <b> body tag </b> which display the image as a background on the web page. 



</font>

<center>

<font size="4" color="red">

<table height="300" border="1" width="500">

	<tr>

		<td> Roll No. </td>

		<td> Name </td>

	</tr>

	<tr>

		<td> 101 </td>

		<td> Abhay </td>

	</tr>

	<tr>

		<td> 102 </td>

		<td> Chetan </td>

	</tr>

	<tr>

		<td> 103 </td>

		<td> Manpreet </td>

	</tr>

	<tr>

		<td> 104 </td>

		<td> Rakesh </td>

	</tr>

	<tr>

		<td> 105 </td>

		<td> Sumit </td>

	</tr>

</table>

</font>

</center>  

</body>  

</html>

Output:

Illustrative Example 4: Demonstrating the utilization of CSS syntax within the style attribute of the table tag to define the background-image property.

Example


<!DOCTYPE html>  

<html>   

<head>  

<title>  

    Example of Background image 

</title>  

</head>  

<body>

<font size="4" color="orange">

In this example, we use the <b> background-image property </b> in the <b> style attribute </b> with the <b> table tag </b> which display the image as a background of HTML table. 

</font>

<font size="4" color="red">

<center>



<table style="background-image:url('https://images.pexels.com/photos/237272/pexels-photo-237272.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');"> 

	<tr>

		<td> Roll No. </td>

		<td> Name </td>

	</tr>

	

	<tr>

		<td> 101 </td>

		<td> Abhay </td>

	</tr>

	<tr>

		<td> 102 </td>

		<td> Chetan </td>

	</tr>

	<tr>

		<td> 103 </td>

		<td> Manpreet </td>

	</tr>

	<tr>

		<td> 104 </td>

		<td> Rakesh </td>

	</tr>

	<tr>

		<td> 105 </td>

		<td> Sumit </td>

	</tr>

</table>

</center>  

</font>

</body>  

</html>

Output:

Illustration 5 showcases the utilization of CSS syntax to modify the background-repeat and background-size properties within the style attribute associated with the body tag.

Example


<!DOCTYPE html>  

<html>   

<head>  

<title>  

    Example of Background image 

</title>  

</head>  



<body style="background-image:url('https://images.pexels.com/photos/237272/pexels-photo-237272.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); 

background-repeat:no-repeat; background-size: 100% 100%"> 



<font size="4" color="green">



In this example, we use the <b> background-repeat and background-size property </b> in the <b> style attribute </b> with the <b> body </b> tag 

which display the image without repeatition. 



</font>

<center>



<font size="4" color="red">

<table height="300" border="1" width="500">

	<tr>

		<td> Roll No. </td>

		<td> Name </td>

	</tr>

	<tr>

		<td> 101 </td>

		<td> Abhay </td>

	</tr>

	<tr>

		<td> 102 </td>

		<td> Chetan </td>

	</tr>

	<tr>

		<td> 103 </td>

		<td> Manpreet </td>

	</tr>

	<tr>

		<td> 104 </td>

		<td> Rakesh </td>

	</tr>

	<tr>

		<td> 105 </td>

		<td> Sumit </td>

	</tr>

</table>

</font>

</center>  

</body>  

</html>

Output:

Browser Support

Element	Chrome	IE	Firefox	Opera	Safari
Background Image	Yes	Yes	Yes	Yes	Yes

Syntax

Note: The Background attribute is not supported in HTML5. Use the following syntax of CSS:

Browser Support

Input Required