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 across the top of the page. A purple gradient I made in photoshop.

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. Purple to white gradient.

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

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

<style type="text/css">

body {

background-image:url(images/purple2.jpg);

background-repeat: repeat-x;

}

</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 4 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.