HTML Background Image

The <background> attribute in the HTML document is used to specify the background image on a HTML page or a table. You can pass the path of an image as a value of background attribute to set the image of your HTML page or table.

Syntax

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

Examples: The following examples set the background image in different styles:

Example 1: This example uses the background attribute with the body tag for displaying the image as a background of the web page.

  <!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>  

Test it Now

Output:

HTML Background Image

Example 2: This example uses the background attribute with the table tag for displaying the image as a background of html table.

  <!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>  

Test it Now

Output:

HTML Background Image

Example 3: This example uses the CSS syntax for the background-image property of the style attribute with the body tag.

  <!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>  

Test it Now

Output:

HTML Background Image

Example 4: This example uses the CSS syntax for the background-image property in the style attribute with the table tag.

  <!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>  

Test it Now

Output:

HTML Background Image

Example 5: This example uses the CSS syntax for the background-repeat and background-size property of the style attribute with the body tag.

  <!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>  

Test it Now

Output:

HTML Background Image