background-image center line up with margin: 0 auto with scroll-bar

Question

i want to have a centered background image vertically stretched over my website. Works perfectly while there is no scrollbar that's move my centered image, but leave my margin: 0 auto in place. Now my content doesn't line up with my background-image.

Html, Body
{
  width: 100%;
  height: 100%;
  background: url('../Images/page-bgr-top.png')
              center top repeat-x;
  overflow: auto;
}

Body {
  background: url('../Images/page-bgr-content.png')
              center top repeat-y;
  display: block;
  overflow: scroll;
}

#Main-Page
{
  width: 900px;
  margin: 0 auto;
  height: 100%;
  display: none;
}

Tried a different solution by set the background-image and overflow: auto on #Main-Page, too and get some nasty scrollbars right on my website.

There's no way of aligning the 2 as they use different values as "center". There is ways round this however. Create a `wrapper` for the entire center column, put the `background` and `margin auto` rules on that instead of body - then place your `header` etc inside that wrapper. That's the most common way to get around this. — naththedeveloper, May 15 '13 at 16:28
Looking at your code you could even apply the `background` to the `#Main-Page` which is already acting as a wrapper. — naththedeveloper, May 15 '13 at 16:29
@FDL tried a different solution by set the background-image and overflow: auto on #Main-Page, too and get some nasty scrollbars right on my website. Without overflow: auto http://stackoverflow.com/questions/16565797/100-body-height-content-is-loaded-dynamically — MR.ABC, May 15 '13 at 16:35

score 0 · Answer 1 · edited May 15 '13 at 16:44

0

This is becuase you are adding too many css to the html and body

 Html, Body
        {
          /*width: 100%;*/ removed 
          height: 100%;
          background: url('../Images/page-bgr-top.png')
                      center top repeat-x;
          /*overflow: auto;*/ removed 
        }

        Body {
          background: url('../Images/page-bgr-content.png')
                      center top repeat-y;
          display: block;
          /*overflow: scroll;*/ removed 
        }

        #Main-Page
        {
          width: 900px;
          margin: 0 auto;
          height: 100%;
          display: none;
        }

edited May 15 '13 at 16:44

MR.ABC

4,712
13
44
88

answered May 15 '13 at 16:30

underscore

6,495
6
39
78

doesn't not work while the content grows bigger than the visible area. http://stackoverflow.com/questions/16565797/100-body-height-content-is-loaded-dynamically – MR.ABC May 15 '13 at 16:33
are you doing any ajax request before load page or do u using .load method ? – underscore May 15 '13 at 16:35
yepp i load the content with the .load method – MR.ABC May 15 '13 at 16:36
where are contents ? i didn't see any – underscore May 15 '13 at 16:37
right now the website just work fully locally. just add some text and float it. – MR.ABC May 15 '13 at 16:39

score 0 · Accepted Answer · answered May 16 '13 at 14:30

0

Solved with javascript. Calculate the width of the scrollbar and add it to the offset of the centered element.

answered May 16 '13 at 14:30

MR.ABC

4,712
13
44
88

background-image center line up with margin: 0 auto with scroll-bar

2 Answers2