Cheap Tricks in CSS Background Images
Goal Setting Software - Affordable Health Insurance - About Us - Contact Us - Privacy - Links
Tutorials - HTML - Domain Names - Email - Web Hosting - Ecommerce - Business Plans - Affiliates - Home Business
HOME

Cheap Tricks in CSS Background Images

 
© Copyright 2003 by BasicTips.com, division of BasicTemplates.com

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.




Return to CSS Tutorial Index



Get your Business Domain Name for only $9.95, Right Here, Right Now!


 
WEBSITE101 TUTORIALS

HTML Tutorial | CGI tutorial | Email Tutorial |
Spam Tutorial | Cookies Tutorial | Privacy Tutorial | Windows Tutorial | DreamWeaver Tutorial | Domain Name Tutorial | Business Plan Tutorial | Search Position Tutorial | Online Advertising Tutorial | Ecommerce Essentials Tutorial





             Free Text to HTML Converter for Web Publishing   
Google
  Web www.WebSite101.com
 
Tutorials - HTML - Domain Names - Email - Web Hosting - Ecommerce - Business Plans - Affiliates - Home Business
   
Goal Setting Software - Affordable Health Insurance - About Us - Contact Us - Privacy - Links
   
   
HOME