Cheap "Background Image" Tricks, Part 5

In a previous CSS article, Easy Borders and Backgrounds, we published a couple of ways to use an image as a background or border. This CSS tip is similar to the previous but we have taken it a small step beyond. You are also invited to download the free 9-11 logo image used in this week's example illustration.

Please review the past article first. Do you see how a single image can be used as a border by limiting it to an x or y axis with the assistance of CSS? However in the next example we added an element to instruct CSS to fix the background and only allow the text to scroll. View example HERE.

Okay, now that you understand that, add the snippet of code below to the body tag of your external style sheet to fix a background image to your page and allow "only the text" to scroll on the y axis.

body { background-attachment: fixed;
background-image: url(yourimagename.gif);
background-repeat: repeat-y;
background-position: 5px
}

Note that a background-position of 5 pixels is used to offset the image 5 pixels from the left side. Otherwise, the image would be directly against the left side of the browser window. Also, be sure the path to your image is correct. It is possible you may not need the full path - experiment.