Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder

Outlines

HTML - Background

Your webpage default background is white in color. you'll not love it, but no worries. HTML provides you following two good ways to embellish your webpage background.

1. HTML Background with Colors

2. HTML Background with Images

Now let's examine both the approaches one by one using appropriate examples.

Html Background with Colors

The bgcolor attribute is employed to regulate the background of an HTML element, specifically page body, and table backgrounds.

Note − The bgcolor attribute deprecated in HTML5. Do not use this attribute.

The following is the proper syntax to use the bgcolor attribute with any HTML tag.

<tagname bgcolor = "color_value"...>

This color_value can be given in any of the following formats:

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Example

The following is the proper way to set the background color of an HTML web page

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </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>

The above code will be displayed as:

Html Background with Images

The background attribute also can be made use of in other to control the background of an HTML element, specifically page body, and table backgrounds. you'll specify a picture to line the background of your HTML page or table.

Note − The background attribute deprecated in HTML5. Do not use this attribute.

The following is the proper syntax to use background attribute with any HTML tag.

Note − The background attribute is deprecated and it is recommended to use Style Sheet for background setting.

<tagname background = "Image URL"...>

The most commonly used image formats are JPEG, GIF, and PNG images.

Example

Here are the examples to set background images of a table.

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

The above code will be displayed as:

Patterned & Transparent Backgrounds

You might have seen many patterns or transparent backgrounds on various websites. This simply are often achieved by employing a patterned image or transparent image within the background.

It is suggested that while creating patterns or transparent GIF or PNG images, use the littlest dimensions possible whilst small as 1x1 to avoid slow loading.

Example

The following is the proper syntax to change the background of a table

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