Zentriert Hintergrundbild ist weg von 1px

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

  •  02-07-2019
  •  | 
  •  

Frage

Meine Webseite sitzt in einem DIV, die 960px breit ist, ich Zentrum dieses DIV in der Mitte der Seite, indem Sie den Code verwenden: 

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;}

Ich brauche das Hintergrundbild des html / Körper Fliese in der Mitte der Seite, die es funktioniert, aber wenn der sichtbare Teilfenster im Browser eine ungerade Anzahl von Pixeln Breite ist dann die zentriert Hintergrund und zentriert DIV don‘ t ausrichten zusammen.

Dies ist nur in FF passiert.

Weiß jemand, der dieses Problem zu umgehen?

War es hilfreich?

Lösung

Ja, es bekanntes Problem. Leider kann man nur beheben div und Bildbreite oder ein Skript verwenden, um dynamisch stye.backgroundPosition Eigenschaft zu ändern. Ein weiterer Trick ist Ausdruck der CSS-Klassendefinition zu setzen.

Andere Tipps

Ich fand, dass das Hintergrundbild, indem sie auf ungerade Anzahl von Pixel breit, das Problem verschwindet für Firefox.

Einstellung padding: 0px 0px 0px 1px; behebt das Problem für den IE.

Carlo Capocasa, Travian Games

Die (meisten) weit verbreitetes Problem ist, dass Ihr Hintergrundbild hat eine ungerade Zahl, während die Behälter eine gerade Zahl ist. Ich habe einen Artikel geschrieben in meinem besten Englisch, wo ich auch erklären, wie der Browser Ihr Bild positionierte: überprüfen sie es hier aus.

Ich konnte dies mit jQuery beheben: 

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

Ich hatte das gleiche Problem.

Um die zu erhalten Hintergrund zentriert , müssen Sie ein haben Hintergrund-Bild breiter als das Bildfenster . Versuchen Sie, einen Hintergrund verwenden 2500px breit. Es wird den Browser zwingen, den Teil des Bildes zu zentrieren, die sichtbar ist.

Lassen Sie mich wissen, ob es für Sie arbeitet.

Was ist ein Wrapper div mit dem gleichen Hintergrund-Bild erzeugt wird. 

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; }

Der Wrapper eine gerade Zahl hat, hält der Hintergrund die gleiche Position auf jeder Bildschirmgröße.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top