Not only can you place background images behind elements, you can also control exactly how those background images behave. You can decide how or if they should tile, whether they should scroll or remain fixed, and where they should be positioned. Yes, neighbors, it's true!
background-repeat
Background images always have to tile, right? Nope. With this CSS property, you can control if or how those images tile.
P { background-repeat: no-repeat; background-image: url(/98/15/stuff3a/background.gif) }
The above rule was applied to this entire paragraph. The same background GIF we've used before appears behind the text, but since we've used no-repeat, it doesn't tile, instead it displays just once.
If you want the background image to tile just vertically or just horizontally, you can do that too. A value of repeat-x makes the image tile horizontally (like you see behind this paragraph), and repeat-y makes the image tile vertically. By the way, a value of repeat makes the image tile in both directions, which is what we're used to seeing.
The preceding two paragraphs were written using the background-repeat property. If your browser doesn't support this property, click here to see what it looks like.
background-attachment
In HTML, we're used to background images scrolling with the page. But with CSS, you can also set up a background image that doesn't scroll, but remains fixed in the window regardless of where you scroll on the page. The key is background-attachment.
BODY { background-attachment: fixed; background-image:
url(/98/15/stuff3a/background.gif) }
Here's an example of background-attachment: fixed in action, so you can see what it feels like when you scroll. (Note: This property doesn't work in Communicator, but IE users can enjoy it.)
This property works only when applied to page backgrounds — that is, background images specified to the <BODY> tag.
You have two choices for values:
- Withscroll, the background image will scroll normally along with the page's contents, the way we're used to seeing it.
- Withfixed, the background image will not scroll, but remains fixed in place regardless of any scrolling the user does.
background-position
Finally, you can also position where your background image should start displaying. Essentially, you control exactly where the image displays behind the element you're applying it to.
P { background-position: center bottom; background-image: url(background.gif) }
So, when the above CSS rule is applied to a paragraph such as this one, the background image is positioned at the center and bottom of the "box" that defines this paragraph. (The first word refers to horizontal position, and the second word refers to vertical position.) The image then tiles down and to the right normally.
If your browser doesn't support this CSS property, click here to see what it looks like.
If you're not seeing what's described above, then you're probably using Communicator, which doesn't support background positioning. :-(
There are three ways to specify position:
- Keyword values
Keywords are nice and easy to use as values:
- top aligns the background image with the top of the foreground element's "box."
- bottom aligns it with the bottom of the "box."
- left positions the image along the left side.
- right positions it along the right side.
- center centers the image horizontally (if used before another keyword) or vertically (if used after).
- Length values
Length values give you even more control over where a background image is placed. You can declare horizontal and vertical starting points very precisely, like so:
P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url(background.gif) }
This paragraph shows the above rule in action. IE displays it properly: The background GIF is placed 70 pixels across and 10 pixels down from the upper-left corner of the "box" that makes up this paragraph. And since I've set background-repeat: repeat-y, the GIF tiles only vertically behind the text. Funky.
If your browser doesn't support this CSS property, click here to see what it looks like.
You can use any of the length units we've previously discussed, such as pixels, points, inches, ems, and so on.
(IE 3 doesn't support length values for this effect.)
- Percentage values
You can also use percentages to set background images in place. Here's an example:
P { background-position: 75% 50%; background-image: url(background.gif) }
As expected, when this stylesheets rule is applied to this paragraph, the background image begins horizontally at a point 75 percent of the way toward the right edge of the paragraph's box, and vertically 50 percent down. Another interesting note: If you resize the browser window and cause the paragraph size to change, the background placement will change accordingly. (It won't work on this particular page, because the column width of the text is absolute, so it won't change when you resize the window. But try it out on your own page.)
If your browser doesn't support this CSS property, click here to see what it looks like.
I've seen this use of percentages behave sporadically buggy in IE.
Before closing this lesson, we need to look at the shorthand property for all background effects.
next page»
