HTML Post #3: Images

Image Tag

<img src="http://example.com/image.jpg" alt="Example Image" />

That will give you just an image, plain and simple. The alt tag is important for people who have images disabled and for search engines. Here’s how to center or left align an image:

<img src="http://example.com/image.jpg" alt="Centered Image" align="center" />
<img src="http://example.com/image.jpg" alt="Left Aligned Image" align="left" />

When using an image inside a link, there will be an automatic blue broder. To remove this:

<a href="http://example.com/">
<img src="http://example.com/images.jpg" alt="Link Image" border="0" />
</a>

Background Images

We’ve all seen images used as backgrounds. It’s fairly simple. To put a background image for the whole page, change the opening body tag to this:

<body style="background: url('image.jpg');">

You can change the repeat by adding the repeat-y keyword like this:

<body style="background: url('image.jpg') repeat-y;">

The image will fill the page top to bottom, but not left to right. There are plenty of options for you background image. Here are the repeats:

  • repeat — tiled to fill completely (default)
  • repeat-y — repeats top to bottom
  • repeat-x — repeats left to right
  • no-repeat — does not repeat

You can also make it scroll with the page or fixed to the screen and does not scroll. Scroll is the default.

You can also set the background of a p, or paragraph, tag the same way.

<p style="background: url('image2.jpg');">I've got a background image!</p>

The full image will not show if there is not enough text.

Colors

You can set the background color, similarly to using an image:

<p style="background-color: red;">I've got a background color!</p>
<p style="background-color: red; color: yellow;">I've got a foreground color!</p>

In the second example, the text will be yellow on red, while the first is black on red.