L'immagine di sfondo centrata è disattivata di 1 pixel

StackOverflow https://stackoverflow.com/questions/113253

  •  02-07-2019
  •  | 
  •  

Domanda

La mia pagina web si trova in un DIV largo 960 px, al centro questo DIV al centro della pagina utilizzando il codice: 

html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}

Ho bisogno dell'immagine di sfondo di html / body per affiancare il centro della pagina, cosa che succede, tuttavia se il riquadro visualizzabile nel browser è un numero dispari di larghezza di pixel, allora lo sfondo centrato e DIV centrato don ' allineare insieme.

Questo succede solo in FF.

Qualcuno sa di una soluzione alternativa?

È stato utile?

Soluzione

Sì, è un problema noto. Sfortunatamente puoi solo correggere div e larghezza dell'immagine o usare lo script per cambiare dinamicamente la proprietà stye.backgroundPosition. Un altro trucco è quello di esprimere la definizione della classe CSS.

Altri suggerimenti

Ho scoperto che allargando l'immagine di sfondo su un numero dispari di pixel, il problema scompare per Firefox.

Riempimento delle impostazioni: 0px 0px 0px 1px; risolve il problema per IE.

Carlo Capocasa, Travian Games

Il problema (più) comune è che l'immagine di sfondo ha un numero dispari mentre il contenitore è un numero pari. Ho scritto un articolo nel mio miglior inglese su dove spiego anche come il browser ha posizionato la tua foto: controlla qui .

Sono stato in grado di risolverlo con jQuery: 

$(document).ready(function(){
 $('body').css({
  'margin-left': $(document).width()%2
 });
});

Ho avuto lo stesso problema.

Per centrare lo sfondo , devi avere un'immagine di sfondo più ampia della finestra . Prova a utilizzare uno sfondo 2500px largo. Costringerà il browser a centrare la parte dell'immagine che è visualizzabile.

Fammi sapere se funziona per te.

Che ne dici di creare un div wrapper con la stessa immagine di sfondo. 

body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }

Il wrapper ha un numero pari, lo sfondo manterrà la stessa posizione su qualsiasi dimensione dello schermo.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top