CSS: l'image de fond ne se remplit pas lors du défilement

Question

CSS: l'image de fond ne se remplit pas lors du défilement

travailler sur un très petit site qui charge en une seule fois, donc il y a une div qui tient toutes les images de fond, et en plus de cela (i.e. indice z plus élevé) il y a une div de contenu qui détient tout. Je peux changer d'arrière-plan facilement en fonction du contenu sélectionné.

malheureusement, j'ai remarqué si vous lancez dans une petite fenêtre de sorte que les barres de défilement apparaissent,si vous faites défiler il n'y a pas d'image de fond dans les parties "révélées" de la page. :-(

structure de la Page:

<body>
<div id="bg">
    <div class="bgone"></div>
    <div class="bgtwo"></div>
</div>

<div id="container">
<!-- content panels here -->
</div>
</body>

css:

#bg
{
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height: 1024px;
    z-index:1;
}
.bgone
{
    margin: 0px;
    position: absolute;
    width:100%;
    height: 1024px;
    background-image:url(../images/one.jpg);
    background-position:top;
    background-repeat:repeat-x;
    z-index:2;
}
.bgtwo
{
    margin: 0px;
    position: absolute;
    width:100%;
    height: 1024px;
    background-image:url(../images/two.jpg);
    background-position:top;
    background-repeat:repeat-x;
    z-index:3;
}
#container
{
    position:relative;
    width:900px;
    padding:0px;
    margin:0px auto;
    height:600px;
    z-index:10;
}

26

background-image css scroll

demandé sur rekindleMyLoveOf 2010-01-18 07:02:01

8 réponses

score 28 · Answer 1

j'ai eu le même problème et c'est embêtant. Le problème pour moi était que je ne pouvais pas changer le HTML, seulement le CSS, donc je pouvais y supprimer les divs supplémentaires.

le problème que je vois c'est que les fonds ont "largeur: 100%" et le conteneur a "Largeur: 900px". Ainsi, par exemple, si la fenêtre du navigateur est large de 800px, les fonds sont définis à 800px et, par conséquent, lorsque vous faites défiler la fenêtre horizontalement, vous obtenez les zones sans fond.

D'une autre façon pour corriger le problème est d'enlever la "largeur: 100%" des fonds et de le remplacer par un "min-width: 900px", forçant ainsi les fonds d'être toujours au moins la même largeur que le conteneur. Lorsque la taille de la fenêtre devient inférieure à 900px, les fonds restent toujours au même niveau que le conteneur. Fonctionne un régal.

score 8 · Answer 2

j'ai eu le même problème. ceci corrigé par overflow-x: scroll;

    top:0px; bottom: 0px;
    height: 100%;
    background-repeat: repeat;
    position: absolute;
    overflow-x: scroll;

score 4 · Answer 3

La réponse est ici:

http://bytes.com/topic/html-css/answers/577902-background-image-getting-cut-off-outside-original-window-display

bref, je rendais les choses trop compliquées. La Solution était de:

se débarrasser des divs qui tiennent bg les images - vous auriez à régler dimensions à 100% juste pour voir bg img, mais cela ne serait que de 100% de la zone affichable / fenêtre d'affichage, qui n'est pas recalculé quand vous défiler.
appliquer directement toutes les images bg le corps de l'élément parce que ses les dimensions ne se limitent pas aux taille initiale de la fenêtre d'affichage

et dans mon cas (à l'aide de plusieurs bg images):

créer des styles css distincts pour chaque image bg, puis
utilisez jquery pour les appliquer à la corps - eg $(corps.)addClass ("specialbg"); etc

score 3 · Answer 4

j'ajouterais à la suggestion de Steg de "supprimer le' width: 100% 'des fonds et de le remplacer par un 'min-width: 900px'," en disant que vous ne devriez pas supprimer la largeur: 100%, mais simplement ajouter un min-width. Autrement, si la largeur est supérieure à la largeur minimale, certains navigateurs peuvent ne pas la répéter au-delà de la largeur minimale.

score 3 · Answer 5

j'ai eu ce problème et fixe avec:

html {
    background-image: url('http://www.standardbrand.com/media/1237/home.jpg');
}
body{
    color: white;
    background: transparent;
}

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      </ul>
    </body>
  </html>

score 2 · Answer 6

en utilisant background-repeat:repeat-x ne vous donnera qu'une rangée de l'image de fond répétée le long du dessus. Si vous supprimez complètement cette propriété CSS, elle va carreler l'image de fond à la fois horizontalement et verticalement, ce qui ressemble à ce que vous voulez. À moins que vos images de fond ne soient 1024px de haut, elles ne rempliront pas le div contenant.

score 2 · Answer 7

dans mon cas, la solution était de fixer une hauteur et/ou une largeur fixes au div en question.

score 1 · Answer 8

juste une note, si vous avez la hauteur définie sur le parent / element, cela peut aussi casser l'image.

Par exemple, la plupart des gens utilisent dans leur code

body {
   height: 100%; //avoid it
}

Las etiquetas más populares

CSS: l'image de fond ne se remplit pas lors du défilement

8 réponses