Fixed_Backgrounds

On Thursday, I shared a neat-o effect to demonstrate some aspects about background images and the link "pseudo-classes." I can't claim it was original - I first read about it [|here].

The basic idea is that when you put a background image in the body tag (or any other tag), you have the option of setting it to scroll or be fixed. That is, if you need to scroll the window in a browser, will the background scroll with the text, or sit still and let the text slide over it? The attribute is called "background-image-attached" and it has two possible values: scroll or fixed.

In this little example, we will use three large graphics, graphicsPlain.jpg, graphicsLight.jpg, and graphicsDark.jpg. Each of these shows the same thing, but we use an image editor like Photoshop or GraphicConverter to lighten or darken the image.

Then, if we make a style section: code format="html4strict"  body  {background-image = url("graphicsPlain.jpg"); background-attachment = fixed; }  a:link {background-image = url("graphicsLight.jpg"); background-attachment = fixed; }  a:hover{background-image = url("graphicsDark.jpg"); background-attachment = fixed; }

code This will give us the cool effect. The image will show up in the background, but if we make a link, it will have a light-colored box around it. If we look more carefully, however, you will see that that box has a lightened version of the background image, perfectly lined up. It makes it look like there is a transparent layer behind the link. If you put your mouse on the link, you will get the same effect, only with a dark layer.

Note: this only works with the fixed attachment, because only in the fixed option do all the images line up with the upper left corner of the window. In the scroll attachment, they images line up with the whatever screen object they are in, so the body image lines up with the corner of the window, and the link images line up with the corner of the link, which is in a different place.

Just a neat trick I thought I'd share. No, you don't have to do this in your projects, but it shows you some of the power of CSS.