Shadowfire Graphics Design
  • Tips and Tricks III

BACK


Putting Images Behind Text

This tip will show you how to use a table to put an image behind your text. Here is an example of a table with a background image and the text on top:

This is the text on a background.

Here is the source code:

<table width=50% height=50>
<tr>
<td background="images/darkclouds.gif">This is the text on a background.</td>
</tr>
</table>

You can, of course, change the width and height of the table to suit your needs.

Fixed Background

A fixed background doesn't move when you scroll up or down. It stays in place. Click here to see an example. To get this effect you must set the bgproperties of the body tag to "fixed". Here's the source code:

<BODY background="picture.jpg" bgproperties="fixed">  

 

 

Page Transition Effects (IE 4+ only)

Did my background effects catch your attention? Would you like to welcome your visitors with similar transitions? You can do this by adding special Meta Tags in the Head section of your web page.

Internet Explorer makes it simple by including one line, a meta tag with a revealTrans() filter. The revealTrans() filter has two parameters, Duration and Transition. Duration defines how long in seconds the special effect will last; the default and minimum value is 4. The Transition parameter defines which type of transition is used. There is a list of all the transitions below. Just insert the code below somewhere between the Head tags of your page, changing the transition number to suit yourself.

<meta http-equiv="Page-Enter" content="revealTrans(Duration=7.0,Transition=5)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=6.0,Transition=12)">

All you have to do is change the number above (in blue) to the transition that you want displayed below. Here's the list of Transition types and their associated numeric values: (Remember: they only work with Internet Explorer 4 or better (which is 75% of all users).

Box in = 0
Box out = 1
Circle in = 2
Circle out = 3
Wipe up = 4
Wipe down = 5
Wipe right = 6
Wipe left = 7
Vertical blinds = 8
Horizontal blinds = 9
Checkerboard across = 10
Checkerboard down = 11
Random dissolve = 12
Split vertical in = 13
Split vertical out = 14
Split horizontal in = 15
Split horizontal out = 16
Strips left down = 17
Strips left up = 18
Strips right down = 19
Strips right up =20
Random bars horizontal = 21
Random bars vertical = 22
Random = 23
 
      
 

Copyright in Status Bar

The status bar is an easy place to show your copyright. All you have to do is place the code below in the BODY tag as shown and change "Shadowfire GD 2000" to your own:

<BODY OnLoad="window.defaultStatus='© Shadowfire GD 2000 ';">

Can you see my copyright in the status bar below? Hold your cursor over this link: Tips & Tricks Index With your copyright done this way, your links will still show up in the status bar whenever someone holds their mouse over the link.

   
  
 

Back to Tips & Tricks Index


Click on Texas to E-mail me!