Intermediate CSS

CSS Background Positioning

A very handy CSS 2 property is the background-position property. I'll be using this property throughout this lesson, so it'll be worth your while to review it with me now.

background-position

You probably know that in CSS 2 background images can tile along the x or y axis using repeat, repeat-x, repeat-y, or no-repeat. You may not know that you can set where the background image begins. This is particularly useful for background images that we don't want to repeat.

Here are the possible values for positioning background images using the background-position property:

For example:
		body { 
			background-image: url("bigdog.jpg"); 
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-position: center; 
		}
	

You can also position the background using lengths (px, %, em, etc), measuring out from the left and from the top. Remember that left comes first, top second:

		background-position: 22px 44px
	

The shorthand for this places the value(s) in the background property, e.g.

		body { background: url("images/appleapple.gif") no-repeat 16.5% 50% }
	

...resulting in the following display:

Now look at an example of how the background-position property is used with the value center right.

Can You Spot This Property?

Stop and think a moment: Where do you think the background-position: center right declaration was used in this Web page?

The answer follows, but try to figure it out on your own first!

I used the following image as a background (the pink is transparent)...

...positioned to the center right of each of my link tabs:

In an unordered list that is absolutely positioned to overlap my page copy box on the right.

I don't want to get into this code right now as it's a bit complex, but if you'd like to see how this effect was achieved you can download a ZIP file containing the XHTML, CSS, and images:

If you understand how background positioning works in CSS, you're ready to proceed onward. We'll practice using the background position in many of the following techniques.