Exercise 3 Demo Part E

Exercise 3 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 3. See a page with a y-axis repeat.

STYLES: Background Images

This time I tiled an image across the top of the page. A blue 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. Blue 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 Background Image </title>

<style type="text/css">

body {

background-image:url(images/blue2.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 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 and this page to see a background image with a div and text.

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

Check out a page with vertical background image repeat or repeat on the y-axis.

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.