Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

CSS Twitter style fixed BG with scrolling content container.

Posted on 2010-09-03
3
603 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
ID: 33597350
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
ID: 33597428
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
ID: 33597492
your very welcome, and thankyou for the points.

eNarc
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…

789 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