Comment centrer un fond div?

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

Il existe d'autres possibilités, mais je pense que la plupart d'entre elles auraient l'un des problèmes ci-dessus.
Par exemple, vous pouvez définir la #pageBodylargeur de 2560px, régler le fond sur elle, ajouter le remplissage d'avoir une taille de contenu 820px et translatedans le but de le centrer sur la page (et empêcher les barres de défilement horizontales à l' aide overflow-xsur body). Cela serait possible car l'image d'arrière-plan et le corps de la page ont tous deux une largeur fixe.