CSS Backgrounds

In these table cells are the nine text values you can use with the background-position property. They are also applied to the cells themselves so you can see their affect. This gives you a bit more control over the placement of the image.

"Nine choices. Is that it? What if I need a little more control over where it goes? No problem, we've got you covered here too. All you have to do is specify the X and Y coordinates in terms of pixels or a percentage of the width and height of the element it's the background image for. Like this:

With either of these methods you have to specify pixels (px) or percentage (%) with no space between the number and its unit denotation. All the pixel values for the background image position are in relation to the top left corner of its element and the top left corner of the image itself. The first pixel or percentage value is always the horizontal placement and the second the vertical.

Now that you know how to put an image on the background of a page element you can choose weather or not that element scrolls with the page or not. The default value is to scroll so you don't have to do anything special for this one. If you would like to achieve that neat effect of the page floating above its background, then this is the code you need to use:

Since the background image for this page isn't sufficient to demonstrate this effect, I have a separate page that I made to share a recipe with a Yahoo® group I'm a member of. So not only will you get to see this code in action, you'll also end up with a great cake recipe too.
Click HERE to view it.

I've never seen this one used with anything other than the body tag. You could try it with other tags, but why you would want their background image to remain static while the rest of it scrolls with the page is beyond me. Maybe it has a use, though I don't know what that would be or if it would even work. If you feel adventurous, give it a try.

Backgrounds Page 2.   Backgrounds Page 4.