Images & Colour

Your page is white by default, but you can add a background colour or a background image.

Adding Colour to your Page

To colour the background you add bgcolor=" " to the opening <Body> tag

<body bgcolor="red">

Adding Images to your Page

To have an image as the background you add background=" " to the opening <body> tag

<body background="Your Image.jpg">

To have the background image fixed add "BGPROPERTIES=FIXED" to the opening <BODY> tag.

You can place an image in your page by using:-

<img src="your image.jpg">

You can have a border round your image by adding border=" "

<img src="your image.jpg" border="2">

The default size of this image is height = 62, width = 61 pixels

You can size the image using the height and width attributes

<img src="your image.jpg" width="100" height="100">

Note
Depending on how much you resize your image and the quality of the image it may become pixelated.

You can have a message inside the image box in case your image does not download or is slow to download
Your message will also popup when the mouse is over the image or image box.

<img src="your image.jpg" alt="Without the image">Without the image

<img src="your image.jpg" alt="With the image">With the image

Note:
The message must be between quotes

Aligning Images

You can position images in the same way text is positioned.

You can have your text aligned to the top of the image by adding align="top" to the image tag

<img src="your image.jpg" align=top>

You can have your text aligned to the center of the image by adding align="center" to the image tag

<img src="your image.jpg" align=center>

You can have your text aligned to the bottom of the image by adding align="bottom" to the image tag

<img src="your image.jpg" align=bottom>

You can align your image to the left.
This will also have the effect
of putting your text down
the right side of the image.
When your text gets to the bottom of the image it will continue as normal.
You may have to resize your image slightly for a perfect fit.
This gives the effect of wrapping the text.

<img src="your image.jpgs" align=left>

If you do not want your text
close up to the image.
then you can use the VSPACE and HSPACE attributes.
This will put a space
between your image
and your text.
<img src="your image.jpgs" align=left vspace=20 hspace=20>

You can align your image to the right.

<img src="your image.jpgs" align=right>

<table border=1 width=200>
<tr align=left>
<td>

<img src="your image.jpg" align=right>

By placing the image in a table and aligning the image to the right you can have text down the left side of the image. Then position the table itself within your page. You could then remove the border and by sizing the table you can get the tabloid effect
</td>
</tr>
</table>
By placing the image in a table and aligning the image to the right you can have text down the left side of the image. Then position the table itself within your page. You could then remove the border and by sizing the table you can get the tabloid effect

Attributes