L'image d'arrière-plan centré est désactivée de 1 pixel

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

  •  02-07-2019
  •  | 
  •  

Question

Ma page Web se trouve dans une DIV de 960 pixels de large, je centre cette DIV au milieu de la page en utilisant le code: 

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

J'ai besoin de l'image d'arrière-plan du code HTML / body pour afficher en mosaïque le milieu de la page. Toutefois, si le volet visible dans le navigateur contient un nombre impair de largeur en pixels, l'arrière-plan et le centre DIV ne sont pas masqués. t aligner ensemble.

Cela ne se produit que dans FF.

Quelqu'un connaît-il une solution de contournement?

Était-ce utile?

La solution

Oui, c'est un problème connu. Malheureusement, vous ne pouvez corriger que la largeur de div et de l'image ou utiliser un script pour modifier dynamiquement la propriété stye.backgroundPosition. Une autre astuce consiste à ajouter une expression à la définition de la classe CSS.

Autres conseils

J'ai constaté qu'en faisant apparaître l'image d'arrière-plan sur un nombre impair de pixels, le problème disparaissait sous Firefox.

Réglage du remplissage: 0px 0px 0px 1px; résout le problème pour IE.

Carlo Capocasa, Travian Games

Le problème le plus courant est que votre image de fond porte un nombre impair, tandis que votre conteneur est un nombre pair. J'ai écrit un article dans mon meilleur anglais sur la manière dont je vous explique également comment le navigateur a positionné votre photo: consultez-le ici .

J'ai pu résoudre ce problème avec jQuery: 

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

J'ai eu le même problème.

Pour que l'arrière-plan soit centré , vous devez disposer d'une image d'arrière-plan plus large que la fenêtre d'affichage . Essayez d’utiliser un fond 2500 px de large. Cela forcera le navigateur à centrer la partie de l'image visible.

Faites-moi savoir si cela fonctionne pour vous.

Qu'en est-il de la création d'un div wrapper avec la même image d'arrière-plan. 

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

Le wrapper a un numéro pair, l’arrière-plan conservera la même position quelle que soit la taille de l’écran.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top