|
Set a Fixed Background Image
By Stephen Bucaro
Use the background-attachment property to set the background image to either
move with the text or to remain fixed as the user scrolls. To set the background to remain
stationary while the user scrolls the webpage, specify the background-attachment
property with the value fixed. An example of this is shown below.
<body style="background-image: url(imagename.jpg); background-attachment: fixed;">
In the following examples, rather than actually setting the background-attachment
property to the webpage that you're looking at, I'll show you how to set the
background-attachment of a <div> element used as a text area.
I'll use some style properties to style the div, which are not related to scrolling
or fixing the background. In order to simplify things, I won't be repeating those properties
in the example code. I list them below just for your information.
width: 400px;
height: 100px;
padding: 10px;
margin: 10px;
border-style: solid;
border-width: 1px;
font-family:verdana;
font-size: 10pt;
overflow: auto;
To set the background image to scroll with the text, set the background-attachment
property to Scroll An example of this is shown below.
<style type="text/css">
.scrollArea
{
background-image: url(bg000251.jpg);
background-attachment: scroll;
}
</style>
<div class="scrollArea">
"Who are you?" said the Caterpillar. This was not an encouraging opening for a conversation.
Alice replied, rather shyly, "I - I hardly know, sir, just at present - at least I know
who I WAS when I got up this morning, but I think I must have been changed several times
since then." "What do you mean by that?" said the Caterpillar sternly. "Explain yourself!"
"I can't explain myself, I'm afraid, sir" said Alice, "because I'm not myself, you see."
"I don't see," said the Caterpillar. "I'm afraid I can't put it more clearly," Alice replied
very politely, "for I can't understand it myself to begin with; and being so many different
sizes in a day is very confusing." - Alice's Adventures in Wonderland by Lewis Carroll.
</div>
"Who are you?" said the Caterpillar. This was not an encouraging opening for a conversation.
Alice replied, rather shyly, "I - I hardly know, sir, just at present - at least I know
who I WAS when I got up this morning, but I think I must have been changed several times
since then." "What do you mean by that?" said the Caterpillar sternly. "Explain yourself!"
"I can't explain myself, I'm afraid, sir" said Alice, "because I'm not myself, you see."
"I don't see," said the Caterpillar. "I'm afraid I can't put it more clearly," Alice replied
very politely, "for I can't understand it myself to begin with; and being so many different
sizes in a day is very confusing." - Alice's Adventures in Wonderland by Lewis Carroll.
| 
Free Downloads