Solved

CSS Twitter style fixed BG with scrolling content container.

Posted on 2010-09-03
3
599 Views
Last Modified: 2012-05-10
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
Comment
Question by:RowdyBurns
  • 2
3 Comments
 
LVL 5

Accepted Solution

by:
eNarc earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:RowdyBurns
Comment Utility
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
 
LVL 5

Expert Comment

by:eNarc
Comment Utility
your very welcome, and thankyou for the points.

eNarc
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now