• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 611
  • Last Modified:

CSS Twitter style fixed BG with scrolling content container.

Hi Experts,

I would like to update my site layout and at the same time give the option for my users to be able to add a BG image of their own. I really like the way Twitter has executed this and would like to be able to create a similar solution.

I need the body background to be fixed with a container the floats centrally and scrolls - I am sure any of you that know twitter will be familiar with it.

I have tried giving the body tag a bg to position:fixed; attribute with a container within set with a position relative and margin:0 auto; but can't seem to get the desired effect.

Does anyone know where I can see a basic working layout / example or tutorial?

Any tips would be greatly appreciated!
0
RowdyBurns
Asked:
RowdyBurns
  • 2
1 Solution
 
eNarcCommented:
try this.

http://webdesign.about.com/od/css/f/blwatermark.htm

<style>
 <!--
 body {
 background-image: url(image.gif);
 background-repeat: no-repeat;
 background-attachment: fixed;
 }
 //-->
 </style>

in twitter the background color is the same as that of the very end of the image, so it looks like its blends as one when you scroll.
0
 
RowdyBurnsAuthor Commented:
eNarc you are awesome! I can't believe all I needed was background-attachment:fixed;
I had been looking for a completely new layout - you have saved me days!
I'm not familiar with background-attachment but I will be reading up now...

Thanks again!
0
 
eNarcCommented:
your very welcome, and thankyou for the points.

eNarc
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now