HTML - Background

HTML background is the HTML attribute used to place pictures in the background of HTML elements. Like the bgcolor attribute, background is now deprecated and its use has been replaced by the use of CSS (see CSS Background). However, this lesson does cover some important aspects of background elements that do apply to both the deprecated HTML background and the new CSS backgrounds as well.

When we think of an HTML background, we generally have only two options: a solid background color or a background image. The backgrounds of both the background color and image grow or shrink dynamically with the growth and shrinkage of the HTML element they are contained in.

<table height="100" width="150"
 background="http://www.tizag.com/pics/htmlT/background.jpg" >
<tr><td>This table has a background image</td></tr>
</table>

Background Image:

HTML - Background Repeat

In the first example, we specified predetermined height and width attributes that matched the dimensions of the image we used in the background of the table element. Everything looks great. But we will run into problems if we add more content to the table itself and this element's height increases in size. The image begins to repeat itself to fill in the extended regions, which may look awful.

<table height="200" width="150"
 background="http://www.tizag.com/pics/htmlT/background.jpg" >
<tr><td>This table has a background image</td></tr>
</table>

Repeating Background:

More often than not, this behavior causes more pain than pleasure, and as web designers, we have two options. We can either live with it (until learning how to squelch it with CSS code) or, use this behavior to our advantage by thinking outside the box.

HTML - Transparent Background Images

In the HTML Images lesson, we mentioned that .gif and .png image types can be saved with transparencies and incorporated into HTML pages. By doing so, we can create HTML elements with a semi-transparent background colors, that can be used to create overlay effects for our web pages.

Transparency can be added to any image via photo editing software, and if you don't currently have such software installed, feel free to download our transparent image from this example via this link: Transparent Backgrounds

Let's now place another background image inside of a table as we did in the previous example, but this time, let's use an image that's a little bit better-suited for a background. This one has a small amount of transparency.

<table height="163" width="480" background="http://www.tizag.com/files/html/htmltransparentbackground.png" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    </td>
  </tr>
</table>

Transparent Background Example:

As the code suggests, we've created a semi-transparent (.png) file to use as the background of the table. Doing so allows the color from this web page to radiate through the image, tinting it blue.

HTML - Background Repeat Revisited

Now that we are more familiar with transparent HTML backgrounds, we can take our previous example a step further and create a very nice effect called a gradient overlay. To do this, we're going to take advantage of the repeating behavior of HTML background images and create a transparent gradient image file that is the same width as the target image (480 pixels), but only 1 pixel tall.

If you do not wish to create your own transparent gradient then, download ours! - HTML Transparent Background Images

<table height="163" width="480" background="http://www.tizag.com/files/html/htmltransparentbackground.png" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table height="163"width="480" background="http://www.tizag.com/files/html/htmltransparentgradient.png">
        <tr>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Gradient Overlay Example:

The gradient image we have provided is 480 pixels wide and only 1 pixel tall. We've done this for two reasons. Although the image is only 1 pixel tall, the web browser continues to repeat this image indefinitely, or for the entire height specified using the height attribute (163 pixels in this case). Additionally, reducing the size of the image to 1 pixel in height drastically reduces the file size and will tremendously improve page performance.

• Go Back
• Continue

Tips

• When creating patterns or transparent gifs, use the smallest dimensions possible even as small as 1x1 if you can. Larger files load slow and inhibit the load time of your sites.
• Experiment, tinker, and fiddle around with your backgrounds to come up with something enjoyable to look at. Be creative.

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!