Teamsugar’s Fixed Background
Every website I visit, I always tend to look at the design first before the content. Maybe this is my way to free myself from tiring programming tasks. And to add to that, I am a self-confessed artist with no gift of arts! So my tendency is just to watch artists do it 
Last week, someone told me to checkout teamsugar. At first, there was nothing extraordinary. When I started to scroll down its long page, I felt something was different then I noticed that the gradient-drop-shadow background consistently follows but when I reached the end, I can see the closure line. I just thought it was amazing since I haven’t seen something like that before. I was asking was it javascript or plain css? Today, I found the answer.
To break the excitement, the only key for this magic is background-attachment which is a CSS property. No javascript!
The background-attachment property determines if a specified background image will scroll with the content or be fixed with regard to the canvas.
Sound straightforward right? The only question remaining now is how scrolling ends when we reached the footer section? Stupid me but the answer was simple! Just cover it with an image. Here is the css:
[css]
#footer {
background: transparent url(images/bot_back.gif) no-repeat scroll center;
height: 32px;
}
#footer2 {
background: #fff none repeat scroll 0%;
}
[/css]
And the HTML:
[html]
test
[/html]
Feel free to play with it here.
That sums it up, I still have a lot of things to learn and I’ll take them one step at a time. For today, background-fixed is my baby!
Recent Comments