Cum se repetă imaginea de fundal în div mai lungă decât lungimea paginii?

Contextul DIV (lungime mai mare de pagină) se oprește din nou

Am o pagină de web HTML cu o imagine de fundal (într-o div), o div care se întinde de sus în partea de jos a paginii și în care div pentru conținut ... Cu toate acestea, fundalul DIV (care se întinde de sus în jos) nu mai repetă mai jos pagina! (de îndată ce parcurgi în jos, nu mai există nicio imagine de fundal) Te rog ajută!

Aici este CSS:

    html {
     height:100%;
    }
    body {
     background-color:#7E6F7F;
     height:100%;
    }
    #bg { /*This is the background image for the whole page*/
     position:fixed; 
     top:0; 
     left:0; 
     width:100%; 
     height:100%;
    }
    #main { /*This is the problem div!!!*/
     padding:0px;
     width:85%;
     height:100%;
     background-color:#D2B9D3;
     background: url(Images/Background_Content.jpg);
     background-attachment:fixed;
     background-position:0% 0%;
     position:relative; 
     top:0;
     left:0;
     z-index:1;
     margin:auto;
    }
    #content { /*This is the the div for the content*/
     display:block;
     width:85%;
     background-color:#E9CFEC;
     padding:0.9375em; /*0.9375em=15px*/
     border:0.125em solid #867687; /*0.125em=2px*/
     text-align:justify;
     -webkit-border-radius:15px;
     -moz-border-radius:15px;
     border-radius:15px;
     -moz-box-shadow: inset 0 0 5px 5px #BAA6BD;
     -webkit-box-shadow: inset 0 0 5px 5px #BAA6BD;
     box-shadow: inset 0 0 5px 5px #BAA6BD;
    }

Multumesc pentru ajutor :)

0

1 răspunsuri

Va trebui să folosiți background-repeat și să-l setați fie la repeat-x , repeat-y /code>.

Mai multe detalii pot fi găsite aici .

EDIT

Ah, văd acum. Valoarea #main este de 100% din browser când se încarcă. Veți observa că repetarea se oprește în timpul derulării. O soluție simplă ar fi adăugarea unui bottom: 0 în stilul #main. Asta o va face să se întindă până la capăt. De asemenea, eliminați înălțimea : 100% .

0
adăugat
Am încercat doar acum, dar nu a făcut nici o diferență ... (nu este repetată în mod implicit pe fundal?) Se repetă până când vă defilați în jos. Alte sugestii?
adăugat autor Scott Hallauer, sursa
Ahhhh ... Aici este link-ul: link
adăugat autor Scott Hallauer, sursa
La naiba, asta nu a funcționat ... Actualizat CSS-ul pe site, fără schimbare!
adăugat autor Scott Hallauer, sursa
Oh nu am vazut asta ... Functioneaza acum !!! MULTUMESC PENTRU DUMNEAVOASTRĂ DUMNEAVOASTRĂ: D
adăugat autor Scott Hallauer, sursa
Așteptați, celelalte pagini s-au schimbat acum?
adăugat autor Scott Hallauer, sursa
Oh ok, mulțumesc că funcționează bine acum ...
adăugat autor Scott Hallauer, sursa
Poți posta codul HTML?
adăugat autor dotty, sursa
Actualizat răspunsul meu
adăugat autor dotty, sursa
Eliminați height: 100% , de asemenea.
adăugat autor dotty, sursa
Pentru asta este o foaie de stiluri globale. Se pare că trebuie să adăugați min-height: 100% în #main pentru a face paginile mai mici să se întindă 100%
adăugat autor dotty, sursa