Exercise 3 Demo Part D

Exercise 3 Demo: Part D : Adding a Tiling Background Image with Styles

This is the HTML and CSS you will need for Part D of Exercise 3.

STYLES: Background Images

To make our page look different we can put an image in the background. Did you notice the image I have in the background?

We will use CSS styles in the head of our document to add a tiling background image. The image is smaller than the screen, so we will let it repeat and fill the entire area.

yellow background image This is the tiling image. It is a little hard to see so I added a border. It is only 1 inch square and is 72ppi (pixels per inch) so it takes very little memory and loads very quickly.

Here is the HTML & CSS you will need to add a tiling background image to your page:

<html> <head> <title>Adding a Background Image </title>

<style type="text/css">

body {

background-image: url(images/yellow.gif);

}

</style>
</head>

Add the style tag information, and then we will use the body tag as our selector.

Opening curly brace, then the property:value. The value is the address of where the image is located.

Make sure there is no space between the url and the opening parenthesis that holds the name of the image file. I have my image inside an image folder so I must include that as part of the directions I give the browser. See the lecture for more information about using folders.

Don't forget your closing curly brace and to close the style and head tags before starting your body.

Have fun with this. By the way, there are links to free background image tiles on the resource page of the class website - or create your own.

Ready for more? Background images that tile in only horizontally or x-axis are next. Part E of Demo 3.

Want to review image alignment with CSS? Part C of Demo 3.

Or review image alignment with plain HTML? Part B of Demo 3.

Go back to the Exercise 3 page.