Images

Missing content

This tutorial requires you to download this image: header.gif

There are two ways to use images on a webpage:

  1. Illustration or reference in a document (diagrams, graphs or photos)

  2. Graphic design and decoration (background patterns, attractive bits and shiny borders)

The first is important to the structure and message of the document so should appear in the HTML. Graphic Design and decoration although enhances the page isn't essential and therefore should go in the CSS file.

HTML, Illustration or Reference Images

Since the HTML should only contain structured content only images that are needed should go there. To add an image in HTML:

<p><img src="la-sunset.jpg" 
alt="Photo of LA sunset" width="264" height="202" /></p>

The image tag has a forward slash before the end angle bracket to close itself.

The src (Source) attribute requires a web address, the same as the href attribute. You can point to images anywhere on the internet by writng their whole address.

The alt (Alternative Text) attribute displays or reads allowed this text if the image can't be displayed and is very important. This is used if there is a problem when the webpage is loading or the person visiting your site is blind.

If you add an Anchor (link) around the image then you'll get an unsightly blue border, add this to the HTML:

<p><a href="la-sunset.jpg"><img src="la-sunset.jpg" 
alt="Photo of LA sunset" width="264" height="202" /></a></p>

Take a look and now add this line to the CSS to set the border to zero:

img {  
  border: 0px;  
}

CSS, Decorative Images

If the image is for decoration then it should be added to the CSS. The only way to add an image in CSS is to set a background-image to something. Even though it sounds limited you can achieve any design you wish this way, it just takes practice and a bit of thought.

Normally you would list all the background properties but the shorthand way is much clearer and easier if you can remember the order:

colour, image address (url), vertical start position, horizontal start position, repeat/tiling.

Here is how it looks when added to the CSS file:

#header {   
  padding-top: 8px;   
  border-bottom: 4px solid fuschia;     	
  background-color: yellow;   
  background: #FFFF00 url(header.gif) top right no-repeat;  
}

The background-color can be a hex colour as shown or set to transparent.

The background-url address must be written within the brackets of url() without spaces or quotes.

The background-position can start at: top, center or bottom followed by left, center or right.

The background-repeat can be no-repeat, repeat-x (tiles horizontally) or repeat-y (tiles vertically).