La parola chiave repeat-y di fogli di stile CSS, o CSS, dice il browser Web per creare tante copie di un'immagine di sfondo come sono necessari per riempire l'altezza di un elemento HTML. Se non si utilizza la sintassi corretta per repeat-y, o omettere gli altri ingredienti necessari per creare l'immagine di sfondo ripetuta, possono sorgere problemi. Esso contribuisce a creare una semplice pagina Web utilizzando repeat-y per ricordare gli elementi essenziali della ripetizione verticale sfondi con CSS.

Sintassi

Se non visualizzi un'immagine di sfondo ripetere verticalmente, è possibile che tu abbia usato la sintassi errata per la parola chiave repeat-y, o la definizione di stile che utilizza la parola chiave. Considerare questa definizione di CSS di esempio che utilizza repeat-y. Nota ogni carattere nel testo dell'istruzione. Le parentesi graffe indicano l'inizio e la fine di una definizione di stile. Le parole chiave "background" dicono interprete CSS del tuo browser per eseguire un'operazione di stile. La parte di "url" ha inizio e fine parentesi e virgolette per specificare un file di immagine. CSS richiede tutti questi componenti per rendere un'immagine ripetere verticalmente. Se uno di tali componenti sono mancanti o digitato in modo errato, l'immagine non si ripeterà.

corpo
{
background-image:URL('bground.gif');
background-repeat: repeat-y;
}

Percorso non corretto o nomi di File

Quando riesci a ottenere un'immagine di ripetere verticalmente sullo sfondo di un paragrafo, div, corpo o altri elementi HTML, assicurarsi che l'immagine che si desidera ripetere esista, e che è nella stessa cartella come pagina Web. La seguente istruzione CSS esempio definisce uno stile utilizzando un'immagine di sfondo ripetuta verticalmente di un elemento div HTML. Si noti che il percorso all'immagine include un'ipotetica cartella denominata "myImages." Se non hai una cartella sul vostro server, o se il file di immagine di "bground.gif" non è in quella cartella, la ripetizione di immagine verticale non funzionerà. Risolvere il problema facendo in modo che i file di cui per gli stili che utilizzano repeat-y esistono e sono nelle cartelle che specificano le istruzioni repeat-y.

div
{
background-image: url('.. \myImages\bground.gif');
background-repeat: repeat-y;
}

Correttezza del codice HTML

Se la definizione di stile CSS utilizzando repeat-y può essere priva di errori, codice HTML difettoso che applica tale definizione in modo non corretto può rendere l'immagine ripetuta non vengono visualizzati. Il brano di pagina Web che segue mostra una definizione di stile e un tag di paragrafo HTML. Si noti che il nome di stile "myStile" che il tag p si riferisce con il relativo attributo di classe è diverso dallo stile "myStyle" nel codice CSS, di un carattere. Questa differenza nei nomi significa che il tag p non Mostra lo sfondo ripetuto come il programmatore destinato. Per risolvere questo problema, il programmatore può risolvere l'errore di battitura nell'attributo di classe di tag di paragrafo.

< style type = "text/css" >
p.myStyle
{
background-image:URL('bground.gif');
background-repeat: repeat-y;
}
< / stile >
< / head >
< corpo >
< classe p = "myStile" > Some text. </p >
< / body >

Dimensioni

Se si sta cercando di ripetere verticalmente un'immagine in un elemento di cui l'altezza è minore impilate due copie dell'immagine, la ripetizione repeat-y immagine non funzionerà. Ad esempio, se si sta cercando di applicare uno stile di repeat-y ad un elemento di pagina relativamente piccolo come un paragrafo, le probabilità sono che non vedrai qualsiasi immagine a tutti. Il motivo è che altezza di un paragrafo è quasi sempre minore altezza di un'immagine, a meno che l'immagine è molto piccolo. È possibile cancellare questo ostacolo utilizzando la parola chiave CSS altezza per specificare un'altezza maggiore per l'elemento. Nel seguente estratto, uno stile CSS per un elemento paragraph imposta altezza dell'elemento in una dimensione relativamente grande. L'altezza può permettere l'effetto di ripetizione-y a lavorare.

P.myStyle
{
Altezza: 300px;
background-image:URL('bground.gif');
background-repeat: repeat-y;
}