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 F of Exercise 3.

STYLES: Background Images

This time I placed an image - a dragon - in the center of my background. When you scroll the page - the image stays in place.

We will use CSS styles in the head of our document to make the image stay in the center of the background. If you shorten the page, the image moves up to remain in the center.

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

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

<style type="text/css">

body {

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

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center center;

}

</style>
</head>

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

Be sure to place the property : values in this order. If you change the order they do not always work correctly.

I have my background attachment fixed. You can also try scroll, whcih allows the design to scroll with your page.

If you use this option, make sure your image does not compromise your text. Also make sure it is saved small enough to appear quickly. No one likes to wait for slow loading images.

For Horizontal tiling go to Part E 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.