HTML Background

HTML Background

Images can be placed within elements of HTML. Tables, paragraphs, and bodys may all have a background image. To accomplish this, we use the background attribute as follows.

<table height="100" width="150"

 background="http://www.hiscript.com/pics/htmlT/background.jpg" >

<tr><td>This table has a background image</td></tr>

</table>

 

HTML Background Repeat

In the first example we happen to be lucky because our image and our table had exactly the same size pixel dimensions. Everything looks great. When your HTML element is larger than the dimensions of your picture, the image simply begins to repeat itself.

<table height="200" width="300"

 background="http://www.hiscript.com/pics/htmlT/background.jpg" >

<tr><td>This table has a background image</td></tr>

</table>

 

It is obvious this is often not the desired outcome, however, it can also be quite useful as you will see in the following example.

HTML Patterned Backgrounds

Repeating a generic image as a background doesnot have much practical use. We either need to find an image to fit exactly as our background or have an image editing program to adjust the dimensions of our image.

From a different angle, we can use this default attribute to our benefit say if we wanted to have some sort of pattern as our background. In an image editing program such as Adobe Photosop, or Paint Shop Pro, we could create a very small (perhaps 4X4 pixels) and create a couple of basic patterns.

<table height="100" width="150"

 background="http://www.hiscript.com/pics/htmlT/pattern.jpg" >

<tr><td>This table has a background patterned image</td></tr>

</table>

 

HTML Transparent Background

Another great techinique, along the same lines as the patterned images, is that of transparent, colored backgrounds. Most image editors have some sort of transparency device to create images that appear see through. We're not going to cover how to do this with every single program, however, most of the time all you need to do is fill your canvas with the color you would like and then set the opacity to something below 100%. Then make sure you save your file as a gif not a jpeg, and all systems should be go.

Now that you have had the crash course on creating transparent files, you place them onto your websites the exact same way as you would a repeating background.