Solved

CSS Twitter style fixed BG with scrolling content container.

Posted on 2010-09-03
3
602 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

778 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