HTML Backgrounds - HTML bgcolor, HTML background

HTML Backgrounds: Webpage background is white in color by default, users may not like it. For this reason, we have two good ways to make our webpage attractive.

HTML backgrounds are divided into two types. They are as follows:

HTML Background with colors
HTML Background with images

HTML Background with colors:

Here the bgcolor attribute is used to control the background of an HTML element, specifically page body, and table backgrounds.

Syntax: <tagname bgcolor = “color_value”…>

Example:

 <!DOCTYPE html>
<html>
   <head>
      <title>HTML Background Colors</title>
   </head>
  
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "Red" width = "100%">
         <tr>
            <td>
               This background is Red
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

Output:

This background is Red

This background is sky blue

This background is green

Note − The bgcolor attribute deprecated in HTML5. Do not use this attribute. It’s recommended to use CSS.

HTML Background with Images

The background attribute can also be used to control the background of an HTML element, specifically page body, and table backgrounds. You can specify an image to set the background of your HTML page.

Syntax: <tagname background = “Image URL”…>

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Background Images</title>
   </head>	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>   
</html>

Patterned and transparent backgrounds

You can have patterned and transparent backgrounds to your websites. This can be done by using patterned and transparent images as a background. It is recommended that while creating patterns or transparent GIF or PNG images, use the smallest dimensions possible even as small as 1×1 to avoid slow loading.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Background Images</title>
   </head>	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
     <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>  
</html>