web-dev-qa-db-fra.com

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

travaillant sur un très petit site qui se charge en une seule fois, il y a donc un div qui contient toutes les images d'arrière-plan, et en plus de cela (c'est-à-dire index z supérieur) il y a un div de contenu qui contient tout. Je peux facilement changer d'arrière-plan en fonction du contenu sélectionné.

Malheureusement, j'ai remarqué que si vous lancez dans une petite fenêtre pour que les barres de défilement apparaissent, si vous faites défiler il n'y a pas d'image d'arrière-plan 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;
}
cssscrollbackground-image
26
rekindleMyLoveOf

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

Le problème tel que je le vois est que les arrière-plans ont "largeur: 100%" et le conteneur a "largeur: 900px". Ainsi, par exemple, si la fenêtre du navigateur a une largeur de 800 pixels, les arrière-plans sont définis sur 800 pixels et, par conséquent, lorsque vous faites défiler la fenêtre horizontalement, vous obtenez les zones sans arrière-plan.

Une autre façon de résoudre le problème est de supprimer le "width: 100%" des arrière-plans et de le remplacer par un "min-width: 900px", forçant ainsi les arrière-plans à avoir toujours au moins la même largeur que le conteneur. Lorsque la taille de la fenêtre devient inférieure à 900 px, les arrière-plans restent toujours les mêmes que le conteneur. Fonctionne un régal.

28
Steg

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;
9
ali bagheri

La réponse est ici:

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

Bref, je compliquais trop les choses. La solution était de:

  1. débarrassez-vous des divs qui contiennent des images bg - vous devrez définir des dimensions à 100% juste pour voir l'img bg, mais ce ne serait que 100% de la zone/fenêtre d'affichage, qui n'est pas recalculée lorsque vous faites défiler.
  2. appliquer toutes les images bg directement à l'élément body car ses dimensions ne sont pas limitées à la taille initiale de la fenêtre

et dans mon cas (en utilisant plusieurs images bg):

  1. créer des styles CSS séparés pour chaque image bg, puis

  2. utilisez jquery pour les appliquer au corps - par exemple $ (body) .addClass ("specialbg"); etc

4
rekindleMyLoveOf

J'ai eu ce problème et corrigé 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>
3
Helzgate

J'ajouterais à la suggestion de Steg de "supprimer le 'width: 100%' des arrière-plans et de le remplacer par un 'min-width: 900px'," en disant que vous ne devriez pas supprimer width: 100%, mais simplement ajouter un largeur min. Sinon, si la largeur est plus grande que la largeur min, certains navigateurs peuvent ne pas la répéter au-delà de la largeur min.

3
neil1967

En utilisant background-repeat:repeat-x ne vous donnera qu'une seule ligne de l'image d'arrière-plan répétée en haut. Si vous supprimez complètement cette propriété CSS, elle mettra en mosaïque l'image d'arrière-plan à la fois horizontalement et verticalement, ce qui ressemble à ce que vous voulez. À moins que vos images d'arrière-plan aient une hauteur de 1024px, elles ne rempliront pas le div contenant.

2
carillonator

Dans mon cas, la solution était de définir une hauteur et/ou une largeur fixes sur le div en question.

2
amypellegrini

Juste une note, si vous avez défini la hauteur sur le parent/élément, cela peut également casser l'image.

Par exemple, la plupart des gens l'utilisent dans leur code

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