Sfondi HTML: come definire lo sfondo delle tue pagine web
È possibile definire gli sfondi HTML con valori di colore oppure con un file di immagine. Con lo sfondo giusto non soltanto migliori il layout del sito web, ma garantisci anche la leggibilità dei contenuti.
Cosa sono gli sfondi HTML?
Lo sfondo HTML (in inglese “background”) è la superficie dietro il contenuto di un sito web. Puoi definire questi sfondi al momento della creazione di una pagina in HTML e anche modificarli in un secondo momento. Per impostazione predefinita gli sfondi HTML sono completamente bianchi. È consigliabile modificarli non solo per migliorare il layout del sito web, ma anche per incrementare la leggibilità dei contenuti.
- Disponibilità garantita al 99,99%
- Dominio, SSL ed e-mail inclusi
- Assistenza 24/7 in lingua italiana
Cosa si può usare come sfondo HTML?
Sono previsti due metodi diversi per definire gli sfondi HTML:
- con un valore di colore
- da un’immagine o un gradiente di colore
I valori sono definiti attraverso l’attributo HTML style. Nei paragrafi seguenti ti mostriamo entrambe le possibilità.
In un altro articolo dedicato puoi scoprire di più sulle possibilità offerte dal tag style HTML.
Definire gli sfondi HTML con un valore di colore
Per modificare il colore degli sfondi HTML utilizza l’attributo style e le proprietà background-color o bgcolor. Per indicare il valore di colore hai a disposizione tre opzioni diverse:
- Nome del colore: puoi definire il colore desiderato inserendo il nome in inglese. Oltre ai valori standard come
red,yellowogreen, puoi indicare anche colori speciali comelightblueodeepskyblue. Puoi usare indifferentemente lettere maiuscole o minuscole. - Codice di colore esadecimale: puoi indicare i colori anche utilizzando il relativo numero esadecimale a sei cifre. Questo numero è costituito da tre coppie di numeri da
0a9e le lettere comprese traaef. La prima coppia indica il rosso, la seconda il verde e la terza il blu; la combinazione 00 è la più bassa e ff è il valore più alto. Il blu sarebbe quindi0000ff. - Valore RGB: in alternativa usa il valore RGB, che è anche la base del codice di colore esadecimale. I valori sono compresi nello spettro da
0a255e si riferiscono ai colori rosso, verde e blu. Il blu sarebbe quindi RGB (0, 0, 255).
La sintassi per definire il colore desiderato per gli sfondi HTML si presenta come segue:
<body style="background-color: valore;">Nell’esempio che segue usiamo un codice di colore esadecimale per definire un blu chiaro come colore di sfondo:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio-sfondo</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Questo è il tuo titolo</h1>
<p>
Qui ci sono i contenuti del tuo sito web.
</p>
</div>
</body>
</html>Il risultato è il seguente:
All’occorrenza puoi definire separatamente i colori per gli sfondi HTML anche per singole aree delle tue pagine web usando l’attributo style e la proprietà background-color. Puoi vedere il funzionamento nell’esempio che segue, in cui sono stati definiti colori diversi per lo sfondo generale e sfondi per i titoli <h2> e i passaggi di testo <p>:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Sfondo esempio</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>Lo sfondo di questo titolo ha il valore di colore DodgerBlue.</h2>
<p>Questo sfondo ha il valore di colore DarkTurquoise.</p>
</body>
</html>
Definire immagini come sfondi HTML
Per poter usare come sfondi HTML immagini o grafici, è necessario salvarli nei formati di immagine JPG, PNG, SVG, WebP o GIF. Nell’esempio che segue vediamo il codice adatto per usare un’immagine come sfondo (il percorso dell’immagine deve essere adattato):
<!DOCTYPE html>
<html lang="it">
<head>
<title>Sfondo esempio</title>
<style>
body { background-image: url('/utente/cartella/assets/sfondo/img/immagine.svg'); background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Questo è il tuo titolo</h1>
<p>
Qui ci sono i contenuti del tuo sito web.
</p>
</div>
</body>
</html>Se decidi di usare un’immagine, devi assicurarti che il contenuto resterà leggibile. Indicando altri parametri puoi adattare il posizionamento dell’immagine o del grafico in qualsiasi momento.
- Domain Connect gratuito per una configurazione facile del DNS
- Certificato SSL Wildcard gratuito
- Protezione privacy inclusa