© 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!
|
