Exercise 4 Demo Part E

Exercise 4 Demo: Part E : Adding a Background Image that Tiles Horizontally with Styles

This is the HTML and CSS you will need for Part E of Exercise 4. See a page with a y-axis repeat.

STYLES: Background Images

This time I tiled an image down the left side of the page. A piece of interlace that is outlined.

We will use CSS styles in the head of our document to make the image tile horizontally across the top of our page. The image is small - only .125 inches wide and 6 inches tall - or 9 pixels by 360 pixels.

This is the tiling image. A piece of interlace that is a png file with an outlined image.

Here is the HTML & CSS you will need to add a vertically tiling background image to your page. I also added a background color to show through the outlined background image.

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

<style type="text/css">

body {

background-image:url(images/bgV.png);

background-repeat: repeat-y;

background-color: #d9c1fd;

}

</style>>
</head>

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

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

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

You can also tile vertically or repeat-y. This is a good way to add a sidebar. See the Exercise 3 page for the variables.

I will upload some sample images in the download folder for you to try this with. As of now - you can only add one background image per page. Eventually more will be possible. How exciting!

Check out this page to see an example of vertical tiling

For more about using Links go to Part F of Demo 4.

Go back to the Exercise 4 page.