15.2 – Immagini di sfondo HTML

Un’immagine di sfondo può essere specificata per quasi tutti gli elementi HTML.

Immagine di sfondo su un elemento HTML

Per aggiungere un’immagine di sfondo a un elemento HTML, utilizzare l’attributo HTML e la proprietà CSS: stylebackground-image

Esempio

Aggiungere un’immagine di sfondo su un elemento HTML:

<p style="background-image: url('smartphone.jpg');">

Puoi anche specificare l’immagine di sfondo nell’elemento, nella sezione: <style> <head>

Esempio

Specificare l’immagine di sfondo nell’elemento:<style>

<style>
p {
  background-image: url('smartphone.jpg');
}
</style>

Immagine di sfondo in una pagina

Se si desidera che l’intera pagina abbia un’immagine di sfondo, è necessario Specificare l’immagine di sfondo sull’elemento: <body>

Esempio

Aggiungi un’immagine di sfondo per l’intera pagina:

<style>
body {
  background-image: url('smartphone.jpg');
}
</style>

Ripetizione 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('smartphone.jpg');
}
</style>

Per evitare che l’immagine di sfondo si ripeta, impostare la proprietà A background-repeatno-repeat.

Esempio

<style>
body {
  background-image: url('smartphone.jpg');
  background-repeat: no-repeat;
}
</style>

Copertina di sfondo

Se si desidera che l’immagine di sfondo copra l’intero elemento, si desidera può impostare la proprietà su background-sizecover.

Inoltre, per assicurarsi che l’intero elemento sia sempre coperto, impostare la proprietà su background-attachmentfixed:

In questo modo, l’immagine di sfondo coprirà l’intero elemento, senza allungamento (l’immagine mantenere le sue proporzioni originali):

Esempio

<style>
body {
  background-image: url('smartphone.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

Allungamento dello sfondo

Se si desidera che l’immagine di sfondo si estenda per adattarsi all’intero elemento, è possibile può impostare la proprietà su: background-size100% 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('smartphone.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

Scopri di più CSS

Dagli esempi precedenti hai appreso che le immagini di sfondo possono essere formattate utilizzando le proprietà di sfondo CSS.

Pubblicato da Luca Bocaletto

Sviluppatore, Creatore, Musicista, Artista, Radiantista, Scacchista.