Categories


Using Animated Backgrounds

There are times when a background color for a table’s row or cell can enhance and call attention to the contents. This is easily accomplished by inserting the code that defines the color – – where xxxxx is the hexadecimal color code. But, what if you want a background other than a solid color? Maybe a pale image of your company’s logo, a pattern that compliments the topic or maybe a moving background that says ‘look at me!’. Inserting an image background is not too difficult as long as you remember:

  • The background image file must be uploaded to the server.
  • The background image will ‘tile’ (repeat itself) if the space to be filled is larger than the uploaded image size. If you do not want the image to ’tile’, you will need to make the background image large enough to fill the required space.

Table Backgrounds

For image backgrounds in a table, the HTML code might look like one of the following.  We’ve given HTML code for the table background, table cell and table row.

Table Code:  

Contents here

Table Row Code:  

Contents here
  

Table Cell Code:  

Contents here
  

Animated Backgrounds

For background images that move, the code would be the same.   The only difference would be that the image you upload would be animated.   Most good graphics programs include an animation program with numerous effects.

The following are some very basic examples of how an animation might look. The first background is set to only animate three times. The second one is set to animate continually.  We’ve used very simple effects with  bright colors for our  two samples but when using something of this nature on a page, we opt for low-key.  If you do not see the first image in animation mode, F5 (Refresh) the page.

BG_Iris

.

.

 .

Pinwheel_ani

.

.

.

Once you have the animated background where you want it, add in the content, images or what every else you may want as normal.   Next time we’ll take a look at how to use a table inside a table to make text easier to read – plus a couple of other ways to accomplish background effects.

Comments are closed.