Search code examples
cssbackgroundscrollbarcenterfixed

Background fixed not centered when there is a scrollbar

I've got a problem with the background of my container. When there is a scrollbar, there is a gap between my content and my background. There isn't any problem when there is no scrollbar.

capture

I think that's because my background is centered on the whole window (scrollbar include) and my content is centered by the margin: 0 auto; (that doesn't include the scrollbar).

Here is my css code...

#container{
    background-image:url('../img/container.png');
    background-attachment:fixed;
    background-position:top center;
    background-repeat:no-repeat;
    margin:0 auto;
    width:900px;
    padding:0 37px;
    padding-bottom:25px;
    }

I've tried to add a padding left of 15px, it works but when there's no scrollbar, that's not centered anymore! When my background is not fixed, it works too but I need to keep it fixed...

Do you have a solution to fix this problem?

Solution

  • Hmm. Could you not create your background box in HTML/CSS instead? That would ensure that the positioning is all consistent.