Immagini di sfondo HTML
È possibile specificare un'immagine di sfondo per quasi tutti gli elementi HTML.
Immagine di sfondo su un elemento HTML
Per aggiungere un'immagine di sfondo su un elemento HTML, utilizza l' styleattributo HTML e la background-imageproprietà CSS:
Esempio
Aggiungi un'immagine di sfondo su un elemento HTML:
<div style="background-image: url('img_girl.jpg');">
Puoi anche specificare l'immagine di sfondo <style>
nell'elemento, nella <head>
sezione:
Esempio
Specificare l'immagine di sfondo <style>
nell'elemento:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Immagine di sfondo su una pagina
Se vuoi che l'intera pagina abbia un'immagine di sfondo, devi specificare l'immagine di sfondo <body>sull'elemento:
Esempio
Aggiungi un'immagine di sfondo per l'intera pagina:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Ripetizione dello sfondo
Se l'immagine di sfondo è più piccola dell'elemento, l'immagine si ripeterà, orizzontalmente e verticalmente, fino a raggiungere la fine dell'elemento:
Esempio
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Per evitare che l'immagine di sfondo si ripeta, imposta la background-repeatproprietà su no-repeat.
Esempio
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Copertina di sfondo
Se vuoi che l'immagine di sfondo copra l'intero elemento, puoi impostare la background-sizeproprietà su
cover.
Inoltre, per assicurarti che l'intero elemento sia sempre coperto, imposta la
background-attachmentproprietà sufixed:
In questo modo, l'immagine di sfondo coprirà l'intero elemento, senza allungamenti (l'immagine manterrà le sue proporzioni originali):
Esempio
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Allungamento dello sfondo
Se vuoi che l'immagine di sfondo si allunghi per adattarsi all'intero elemento, puoi impostare la background-sizeproprietà su
100% 100%:
Prova a ridimensionare la finestra del browser e vedrai che l'immagine si allungherà, ma coprirà sempre l'intero elemento.
Esempio
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Ulteriori informazioni CSS
Dagli esempi precedenti hai appreso che è possibile applicare uno stile alle immagini di sfondo utilizzando le proprietà di sfondo CSS.
Per saperne di più sulle proprietà di sfondo CSS, studia il nostro Tutorial di sfondo CSS .