Exercise 3 Demo Part E

Exercise 3 Demo: Part E : Adding a Background Image that Tiles Vertically with Styles

This is the HTML and CSS you will need for Part E (vertical) of Exercise 3.

STYLES: Background Images on a Y-Axis

This time I tiled an image down the side of the page. This is a good way to add a border.

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 2 inches wide and .25 inches tall - or 144 pixels by 18 pixels.

This is the tiling image. A burgundy and black strip with a drop shadow .

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

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

<style type="text/css">

body {

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

background-repeat: repeat-y;

}

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

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!

Background images are fixed and centered are featured in Part F of Demo 3.

Go back to the horizontal background image repeat or repeat on the x-axis Part E of Demo 3.

For overall tiling go to Part D 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.