Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Cheap "Background Image" Tricks, Part 5
By BasicTemplates with External CSS

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.