Ripeti immagine di sfondo CSS
Ripetizione in background CSS
Per impostazione predefinita, la background-imageproprietà ripete un'immagine sia orizzontalmente che verticalmente.
Alcune immagini dovrebbero essere ripetute solo orizzontalmente o verticalmente, altrimenti sembreranno strane, come questa:
Esempio
body
{
background-image: url("gradient_bg.png");
}
Se l'immagine sopra viene ripetuta solo orizzontalmente ( background-repeat: repeat-x;), lo sfondo avrà un aspetto migliore:
Esempio
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Suggerimento: per ripetere un'immagine verticalmente, impostarebackground-repeat: repeat-y;
Ripetizione in background CSS: nessuna ripetizione
La visualizzazione dell'immagine di sfondo una sola volta è specificata anche dalla background-repeatproprietà:
Esempio
Mostra l'immagine di sfondo una sola volta:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Nell'esempio sopra, l'immagine di sfondo è posizionata nella stessa posizione del testo. Vogliamo cambiare la posizione dell'immagine, in modo che non disturbi troppo il testo.
Posizione di sfondo CSS
La background-positionproprietà viene utilizzata per specificare la posizione dell'immagine di sfondo.
Esempio
Posiziona l'immagine di sfondo nell'angolo in alto a destra:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}