Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS Twitter style fixed BG with scrolling content container.

Posted on 2010-09-03
3
Medium Priority
?
607 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
[X]
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
  • 2
3 Comments
 
LVL 5

Accepted Solution

by:
eNarc earned 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

688 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