CSS corrigé problème de fond répété

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

  •  10-07-2019
  •  | 
  •  

Question

Je conçois un site avec un arrière-plan répété fixe, mais je ne comprends pas pourquoi il a un problème.

Si vous chargez le site dans une petite fenêtre, faites défiler vers la droite, l'arrière-plan ne continue pas et l'affichage de la couleur d'arrière-plan à la place.

Des idées?

Le site est: http://new.focalpix.co.uk/

CSS pour le fond est: 

body {
    background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
Était-ce utile?

La solution

Essayez le CSS suivant: 

body, html {
    color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}

body {
    font-size: 70%;
}

Il semble que (dans Opera et Chrome) le navigateur traite la zone située en dehors de la fenêtre d'affichage initiale du navigateur comme faisant partie de la balise HTML mais ne faisant pas partie du BODY. Vous pouvez le vérifier en plaçant l'image d'arrière-plan sur le code HTML, mais pas la balise BODY, puis voir comment elle apparaît uniquement dans la zone de défilement du document. Je ne sais pas pourquoi cela se produit - quelqu'un?

CSS ci-dessus apparaît pour résoudre le problème, cependant.

Autres conseils

vous avez défini le fond du corps: url dans style.css, ligne 13, mais vous avez également défini des règles pour le fond du corps dans la règle commençant à la ligne 17.

La règle à la ligne 17 concerne Body, html, mais celle commençant à la ligne 11 concerne uniquement body. Vous pouvez probablement les condenser en une seule règle, en définissant exactement ce que vous voulez que l'arrière-plan soit - une couleur ou une image à partir d'une URL

Cela est dû au fait que la balise <body> est définie par défaut sur 100% de la largeur de la fenêtre du navigateur - pas sur le site. Cela signifie que lorsque la largeur de la fenêtre est inférieure à 960 pixels - la largeur de votre site, le bloc de corps se termine. Pour résoudre ce problème, définissez simplement: 

body {min-width: 960px}

Malheureusement, min-width ne fonctionne pas dans les anciennes versions d'Internet Explorer sans un hack JavaScript appelé minmax . Je suggérerais de placer le code javascript intégré dans certains commentaires conditionnels afin d'éviter toute requête HTTP inutile et d'éventuelles erreurs de compatibilité dans les nouveaux navigateurs. Donc, intégrez minmax comme suit: 

<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>  
<![endif]-->

En outre, un conseil général: ces problèmes sont assez faciles à résoudre en jouant avec firebug .

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