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?

Answers


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


This is wrong

background-position:top center;

The first value is the horizontal position and the second value is the vertical.

CSS background-position Property

Correct the code using

background-position:center top;

Need Your Help

Perfect Java code to determine a Double is a Perfect Square or not?

java numbers

I want to determine whether a number (in double) is a perfect square or not. I have used the below code but it fails for many inputs.

Adding and removing elements from D3 Visualization with animation

javascript animation d3.js chord-diagram

long time user first time asking a question here (first time I haven't been able to solve a problem using answers I searched for). I've recreated the uber chord chart in JS D3 with my own data. My