How to center a background div?

Question

What I want

two div : A page body (1) and a background block (2)

• background block is always (2560 x 780) px
• page body width is 820px while height is variable
• background block should be behind page body
• background block and page body should both be centered
• background block should not move relatively to page body when resizing the window (even by 1 pixel !)
• no horizontal scroll bar should appear for background block
• background block position isn't fixed

Constraints

• no JS
• CSS2 preferred

What I tried

Page body CSS:

#pageBody {
    width: 820px;
    margin: 0 auto;
}

Background block CSS:

1. A full-page div which displays a CSS centered background

<div id="backgroundBlock"></div>
<div id="pageBody">
</div>

#backgroundBlock {
    background: no-repeat center 0 url(bg.png);
    width: 100%;
    height: 100%;
    position: absolute;
}

But when the window's size is odd:

• the CSS background is shifted by 1 pixel on the left
• background image appears blurry on Internet Explorer

2. A repositioned child div

• make background block a child of page body (which is centered)
• make background block positioned absolute (to put it behind page body)
• use negative margins to reposition the background block
• make background block overflow: hidden to prevent the scroll bar from appear for that div

<div id="pageBody">
    <div id="backgroundBlock"></div>
</div>

#backgroundBlock {
    background: no-repeat url(bg.png);
    width: 2560px;
    height: 780px;
    position: absolute;
    margin: 0 0 0 -870px;
    overflow: hidden;
}

But problem: the scroll bar appears for the background block...

Answer 1

Here are a few ideas I could think of, with their issues. However, I could not reproduce the "blurry in IE" issue, so I don't know which solution have it or not.
I did put "Extra markup" as an issue for solutions including a div (#backgroundBlock) only used to display the background image, as it is not semantic.

---

Solution 1 (jsfiddle)

• Description : Your first solution
• Issues :
  • Extra markup
  • On Chrome, depending on the page size, pixels can be aligned differently. You can see it on jsfiddle near the right border :

---

Solution 2 (jsfiddle)

• Description : Multiple-backgrounds on body. #backgroundBlock div not needed.

  body {
      background: no-repeat center top url(bg.png), url(bodybg.png);
  }
  

• Issues :

  • Not compatible with old browsers (IE8, FF3.5, ... ; source)
  • On Chrome, same alignment problem as in solution 1

---

Solution 3 (jsfiddle)

• Description : Use of translate. No more pixel alignment errors.

  #backgroundBlock
  {
      background: url(bg.png);
      width: 2560px;
      height: 780px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
  }
  

• Issues :

  • Extra markup
  • You have to use overflow-x: hidden on body to avoid horizontal scrollbar
  • Not compatible with old browsers (IE8, FF3, ... ; source). You should also use prefixes for compatibility (-webkit-, -moz-, ...). I did not add them to keep the example simple

---

Solution 4 (jsfiddle)

• Description : Use of translate and ::before. Alternative version of solution 3. Pseudo-elements compatibility are not an issue here since every browser supporting 2D-tranforms supports ::before (source).

  #backgroundBlock
  {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }
  #backgroundBlock:before
  {
      content: '';
      background: url(bg.png);
      width: 2560px;
      height: 780px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
  }
  

• Issues :

  • Extra markup
  • Not compatible with old browsers (IE8, FF3, ... ; source). You should also use prefixes for compatibility (-webkit-, -moz-, ...). I did not add them to keep the example simple

---

There are other possibilities but I think most of them would have one of the above issues.
For example, you could set the #pageBody width to 2560px, set the background on it, add padding to have a content size of 820px and translate it in order to have it centered on the page (and prevent horizontal scrollbars using overflow-x on body). This would be possible because the background image and page body both have fixed width.