How to center a div background?

Question

What I want

two divs: page body (1) and background block (2)

• always block (2560 x 780) px
• page width is 820 pixels and height is variable
• the background block should be behind the body of the page
• background block and page body should be centered
• the background block should not move relative to the body of the page when the window is resized (even by 1 pixel!)
• horizontal scrollbar should not appear for block background
• The background position is not fixed.

Limitations

• no js
• Preferred CSS2

What i tried

CSS page body:

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

CSS background block:

1. A full-page div that displays a background centered in the center

 <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 size is odd:

• CSS background is shifted 1 pixel to the left.
• background image looks blurry in Internet Explorer

2. Moved child div

• make the background block a child of the page body (centered)
• make the background block positioned absolute (put it behind the body of the page)
• use negative fields to change the background block.
• make background overflow: hidden to prevent scrollbar for this 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 the problem is: a scrollbar appears for the background of the block ...

Answer 1

Here are a few ideas I could come up with with their problems. However, I could not reproduce the “blur in IE” problem, so I don’t know which solution it has or not.
I put "Extra markup" as a problem for solutions, including a div ( #backgroundBlock ), used only to display a background image, since it is not semantic.

---

Solution 1 ( jsfiddle )

• Description : your first decision
• The problems :
  • Additional allowance
  • In Chrome, depending on the page size, pixels can be aligned differently. You can see this on jsfiddle near the right border:

---

Solution 2 ( jsfiddle )

• Description Several backgrounds on the body. #backgroundBlock div is not required.

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

• The problems :

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

---

Solution 3 ( jsfiddle )

• Description : using translate . More pixel alignment errors.

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

• The problems :

  • Additional allowance
  • You should use overflow-x: hidden on the body to avoid the 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 a simple example

---

Solution 4 ( jsfiddle )

• Description : using translate and ::before . An alternative version of solution 3. Pseudo-element compatibility is not a problem here, since every browser that supports 2D transoms 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); } 

• The problems :

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

---

There are other possibilities, but I think most of them would have one of the above problems.
For example, you can set the width of #pageBody to 2560 pixels, set the background on it, add padding to have the content size 820px and translate so that it is centered on the page (and prevent the use of horizontal scroll bars with overflow-x on the body ). This would be possible because the background image and page body have a fixed width.