Problème d'arrière-plan répété fixe CSS

Je suis en train de concevoir un site avec un arrière-plan répété fixe mais je n'arrive pas à comprendre pourquoi il a un problème.Problème d'arrière-plan répété fixe CSS

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

Des idées?

Site est: http://new.focalpix.co.uk/

CSS pour l'arrière-plan est:

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

Source

2009-01-11 Rich Bradshaw

Hmm ... l'erreur doit être liée à quelque chose d'autre à propos de votre CSS car j'ai juste essayé l'extrait de css que vous avez posté avec autre chose et ça s'est bien passé. –

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 ressemble (à la fois Opera et Chrome) le navigateur traite la zone 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 vérifier cela en plaçant l'image d'arrière-plan sur le code HTML, mais pas sur la balise BODY, puis voir comment elle apparaît uniquement dans la zone de défilement vers l'affichage du document. Je ne sais pas pourquoi cela se passe - quelqu'un?

CSS ci-dessus semble résoudre le problème, cependant.

Source

2009-01-11 12:17:47

Merci - c'est ce qui arrive quand vous modifiez l'ancien code que vous avez écrit il y a longtemps! –

vous avez défini body background: url en ligne style.css 13, mais aussi des règles définies pour le fond du corps dans le démarrage de la règle sur la ligne 17.

La règle sur la ligne 17 est pour le corps, html, mais celle commençant à la ligne 11 est juste pour le corps. Vous pourriez probablement condenser ces derniers dans une règle, définir exactement ce que vous voulez que le fond soit - une couleur ou une image à partir d'une url

Source

2009-01-11 12:01:38 rejj

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

body {min-width: 960px}

Malheureusement, min-width ne fonctionne pas dans les anciennes versions d'Internet Explorer sans JavaScript bidouille appelé minmax. Je suggérerais d'inclure le code d'intégration javascript à l'intérieur de certains commentaires conditionnels pour éviter une requête HTTP inutile et des erreurs de compatibilité potentielles dans les nouveaux navigateurs. Donc, intégrer minmax comme ceci:

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

En outre, un conseil général - ces questions sont assez faciles à résoudre en jouant avec firebug.

Source

2009-01-11 12:20:47

Problème d'arrière-plan répété fixe CSS

Répondre

Questions connexes