14.3 C
Roma
mercoledì, Maggio 12, 2021
Home Corsi Impostare un'immagine come background in HTML

Impostare un’immagine come background in HTML

Impostare un’immagine come background di un elemento in HTML può essere molto utile per migliorare l’aspetto grafico della vostra pagina. La procedura che vedremo oggi potrà essere applicata a tutti gli elementi HTML.

Per poter applicare tale procedura necessitiamo di applicare del codice CSS all’interno del tag dell’oggetto tramite l’attributo style. Per style invece dobbiamo specificare il tag di background e l’url dell’immagine, ad esempio “background-image: url(‘developersumo.jpg’);”

<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p>A background image for a div element:</p>

<p style="background-image: url('developersumo.jpg');">
Amiamo <br>ogni <br>nostro <br>lettore
</p>


</body>
</html>

In questo caso abbiamo applicato del codice CSS sul singolo oggetto <p>. Possiamo tuttavia effettuare tale applicazione su tutti gli oggetti per quella determinata tipologia. Per intenderci meglio, nell’esempio di sopra abbiamo dato ad un singolo paragrafo quell’immagine, nell’esempio che segue lo applicheremo in modo generale affinché tutti gli oggetti di quella classe abbiamo quell’immagine di background.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url('developersumo.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>Salve lettore di Developer Sumo. <br> Sono molto contento che tu sia qui <br> a leggere questo articolo</p>

<p>Nell'articolo in questione analizzeremo <br> come impostare come background <br> di un oggetto HTML <br> un'immagine </p>

</body>
</html>

Se avete già sperimentato il codice che vi abbiamo proposto fino a questo momento avrete notato che se la vostra immagine è troppo piccola, verrà ripetuta è possibile evitare tutto ciò impostando come proprietà dell’oggetto l’attributo “background-repeat” impostandolo su “no-repeat”. Vediamo nel dettaglio come

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url('developersumo.jpg');
  background-repeat: no-repeat;

}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>Salve lettore di Developer Sumo. <br> Sono molto contento che tu sia qui <br> a leggere questo articolo</p>

<p>Nell'articolo in questione analizzeremo <br> come impostare come background <br> di un oggetto HTML <br> un'immagine </p>

</body>
</html>

Nei nostri esempi abbiamo applicato questo formato degli oggetti esclusivamente a dei paragrafi ma esso può essere utilizzato su ogni oggetto visivo del vostro documento html anche body e head.

LINK UTILI

Pagina Instagram: https://www.instagram.com/developer_sumo/
I nostri corsi: https://www.developersumo.com/corsi/
Corso HTML: https://www.developersumo.com/html/
Scopri le nostre App su Google Play: https://play.google.com/store/apps/details?id=com.developersumo.app

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Cos’è e come fare un Vlog

Se siete abituati ad usare la tecnologia è abbastanza probabile che siate giovani e che passiate molto tempo sui social e se...

Come usare e creare le classi in HTML

L'attributo class è utilizzato per assegnare ad un oggetto HTML una classe. Una delle caratteristiche principali delle classi HTML è che possono...

Lista compleanni personaggi Death Note

Death Note scritto da Tsugumi Ōba e illustrato da Takeshi Obata. È stato serializzato in Giappone dal 1º dicembre 2003 al 15...

Linguaggio di Programmazione di League of Legends

Se sei un appassionato di sviluppo informatico sicuramente ti sarai chiesto quale sia il linguaggi di programmazione di League of Legends. League...

Recent Comments