Come Impostare il Colore di Sfondo in HTML

Questo articolo spiega come poter modificare il colore dello sfondo di una pagina web usando il codice HTML.

Metodo 1
Metodo 1 di 4:

Passi Iniziali

  1. Immagine titolata 2609629 1 2
    1
    Determina il colore che vuoi usare come sfondo. I colori in HTML sono contraddistinti da codici basati sulle diverse sfumature. Puoi utilizzare lo strumento gratuito "HTML Color Picker" fornito dal sito web W3Schools HTML per individuare il codice del colore che vuoi utilizzare:
    • Visita il sito https://www.w3schools.com/colors/colors_picker.asp usando il browser internet del computer.
    • Clicca sul colore di base che desideri usare visualizzato all'interno della sezione "Pick a Color".
    • Seleziona la sfumatura che preferisci visualizzata all'interno dell'elenco visibile sul lato destro della pagina.
    • Prendi nota del codice alfanumerico riportato accanto alla sfumatura del colore di base che hai scelto di usare come sfondo.
  2. Immagine titolata 2609629 2 2
    2
    Apri il documento HTML della pagina web che vuoi modificare utilizzando l'editor di testo che preferisci. Con il rilascio dello standard HTML5 l'attributo HTML <bgcolor> non è più supportato. Il colore dello sfondo di una pagina, così come tutti gli altri aspetti dello stile, dovrebbero essere gestiti tramite i fogli di stile CSS.[1]
    • Se stai usando un computer Windows, puoi utilizzare Notepad++ o l'editor Blocco note, mentre se stai usando un Mac puoi utilizzare l'editor TextEdit o BBEdit.
  3. Immagine titolata 2609629 3 2
    3
    Aggiungi la sezione "html" al documento HTML. Tutte le informazioni relative allo stile grafico della pagina web (incluso il colore dello sfondo) dovrebbero essere inserite all'interno dei tag <style></style> tags: 
      <!DOCTYPE html>
<html>
<head>
<style>
</style> 
</head>
</html>
  4. Immagine titolata 2609629 4 2
    4
    Crea una riga vuota all'interno dei tag "style". Ti servirà una riga di testo vuota per poter inserire le informazioni. Creane una sotto al tag <style> e prima del tag </style>.
  5. Immagine titolata 2609629 5 2
    5
    Inserisci l'elemento "body". Digita il seguente codice all'interno dei tag <style></style>: 
      body { 
}
    • Qualsiasi codice inserirai all'interno dell'elemento "body" del foglio di stile CSS avrà un effetto diretto sull'intera pagina web.
    • Se vuoi usare un gradiente come sfondo della pagina, salta questo passaggio e fai riferimento a questa sezione dell'articolo.
    Pubblicità
Metodo 2
Metodo 2 di 4:

Usare un Colore a Tinta Unita

  1. Immagine titolata 2609629 6 2
    1
    Individua la sezione "html" del documento. Dovrebbe essere visibile nella parte superiore del file.
  2. Immagine titolata 2609629 7 2
    2
    Aggiungi la proprietà "background-color" all'elemento di stile "body". Digita il codice background-color: all'interno delle parentesi graffe dell'elemento "body". Arrivato a questo punto l'elemento "body" dovrebbe apparire come segue: 
      body {
    background-color: 
}
    • In questo contesto puoi utilizzare solo la parola chiave "color" e non "colour".
  3. Immagine titolata 2609629 8 3
    3
    Inserisci il codice del colore che vuoi usare come sfondo. Digitalo dopo il parametro "background-color:" e aggiungi un punto e virgola finale. Se per esempio vuoi usare il rosa come colore di sfondo, il codice da usare dovrebbe essere il seguente: 
      body {
    background-color: #d24dff;
}
  4. Immagine titolata 2609629 9 2
    4
    Esamina il codice che hai creato fino ad ora. Arrivato a questo punto la sezione HTML del tuo file dovrebbe assomigliare alla seguente: 
      <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #d24dff
}
</style>
</head>
</html>
  5. Immagine titolata 2609629 10 2
    5
    Usa il parametro "background-color" per modificare il colore dello sfondo degli altri elementi della pagina. Esattamente come hai fatto per l'elemento "body" puoi usare il parametro "background-color" per definire il colore dello sfondo di altre parti della pagina, come intestazioni, paragrafi e così via. Per esempio se vuoi modificare il colore dello sfondo dell'intestazione principale della pagina (caratterizzata dal tag <h1>) o di un paragrafo (caratterizzato dal tag <p>) dovrai utilizzare un codice simile al seguente:[2] 
      <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
h1 {
    background-color: #00b33c;
}
p {
    background-color: #FFFFFF);
}
</style>
</head>
<body>
<h1>Intestazione con sfondo verde</h1>
<p>Paragrafo con sfondo bianco</p>
</body>
</html>
    Pubblicità
Metodo 3
Metodo 3 di 4:

Usare un Gradiente Come Sfondo

  1. Immagine titolata 2609629 11 2
    1
    Individua la sezione "html" del documento. Dovrebbe essere visibile nella parte superiore del file.
  2. Immagine titolata 2609629 12 2
    2
    Comprendi la sintassi di base per eseguire questo tipo di modifica. Quando devi creare un gradiente da usare come sfondo di una pagina web occorre gestire due tipi di informazioni: il punto di inizio/angolo e i colori del gradiente con cui effettuare la transizione. Puoi creare un gradiente utilizzando colori multipli per effettuare la transizione e la direzione in cui si dovrà sviluppare. Ecco la sintassi da usare per utilizzare un gradiente di colori:[3] 
      background: linear-gradient(direzione/angolo, colore_1, colore_2, colore_3, eccetera);
  3. Immagine titolata 2609629 13 2
    3
    Crea un gradiente verticale. Se non specifichi una direzione o un angolo il gradiente verrà creato verticalmente, cioè la transizione del colore si svilupperà dall'alto verso il basso. Per creare un gradiente di questo tipo inserisci il seguente codice all'interno dei tag <style></style> del tuo file HTML: 
      html {
    min-height: 100%; 
}
body {
    background: -webkit-linear-gradient(#93B874, #C9DCB9); 
    background: -o-linear-gradient(#93B874, #C9DCB9); 
    background: -moz-linear-gradient(#93B874, #C9DCB9); 
    background: linear-gradient(#93B874, #C9DCB9); 
    background-color: #93B874; 
}
    • Browser internet diversi adottano un modo differente per creare l'effetto grafico del gradiente, quindi hai la necessità di includere più di una versione del codice HTML per preservare la compatibilità.
  4. Immagine titolata 2609629 14 2
    4
    Crea un gradiente direzionale. Se preferisci creare un gradiente personalizzato con un effetto grafico più complesso, puoi specificare la direzione in cui si dovrà sviluppare la transizione dei colori che vuoi includere nel gradiente. In questo caso dovrai inserire il seguente codice all'interno dei tag <style></style>:[4] 
      html {
    min-height: 100%;
}

body {
    background: -webkit-linear-gradient(left, #93B874, #C9DCB9); 
    background: -o-linear-gradient(right, #93B874, #C9DCB9); 
    background: -moz-linear-gradient(right, #93B874, #C9DCB9); 
    background: linear-gradient(to right, #93B874, #C9DCB9); 
    background-color: #93B874; 
}
    • Puoi provare a usare i parametri "left" e "right" per la direzione del gradiente in modo da poter avere un'idea dei rispettivi effetti grafici che otterrai.
  5. Immagine titolata 2609629 15 2
    5
    Usa altri attributi per modificare il gradiente. Questo tipo di sfondo offre molte funzionalità con cui si può sperimentare per personalizzare la propria pagina.
    • Per esempio puoi scegliere di utilizzare più di due colori per il gradiente specificando anche la percentuale di ciascuno. In questo modo avrai la possibilità di specificare quanto spazio dovrà occupare ogni singolo segmento di colore. Ecco il codice di esempio di un gradiente che sfrutta questo principio di funzionamento: 
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
  6. 6
    Aggiungi una trasparenza ai colori. In questo modo il colore verrà sfumato. Ricorda che in questo caso dovrai utilizzare il medesimo colore perché l'effetto della sfumatura sia coerente. Utilizza la funzione rgba() per definire il colore da usare. Il parametro finale determinerà il livello della trasparenza: 0 per usare la tonalità massima del colore specificato o 1 il livello massimo di trasparenza. 
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
  7. Immagine titolata 2609629 16 2
    7
    Esamina il codice HTML completo. Il codice finito per creare un gradiente di colori da usare come sfondo per una pagina web sarà simile al seguente: 
      <!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%;
}
 
body {
    background: -webkit-linear-gradient(left, #93B874, #C9DCB9); 
    background: -o-linear-gradient(right, #93B874, #C9DCB9);
    background: -moz-linear-gradient(right, #93B874, #C9DCB9); 
    background: linear-gradient(to right, #93B874, #C9DCB9); 
    background-color: #93B874; 
}
</style>
</head>
<body>
</body>
</html>
    Pubblicità
Metodo 4
Metodo 4 di 4:

Creare uno Sfondo Animato

  1. Immagine titolata 2609629 17 2
    1
    Individua la sezione "html" del documento. Dovrebbe essere visibile nella parte superiore del file.
  2. Immagine titolata 2609629 18 2
    2
    Aggiungi l'attributo "animation" all'elemento CSS "body". Inserisci il seguente codice all'interno delle parentesi graffe dell'elemento "body":[5] 
          -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
    • La prima linea di codice garantisce la compatibilità del codice HTML con i browser basati sul progetto Chromium, mentre la seconda linea di codice garantisce la compatibilità con tutti gli altri browser internet.
  3. Immagine titolata 2609629 19 2
    3
    Aggiungi i colori per l'animazione. Adesso per specificare i colori che verranno utilizzati per riprodurre la transizione animata dello sfondo dovrai utilizzare il parametro "@keyframes" e specificare per quanto tempo ogni colore dovrà essere visibile sulla pagina. Anche in questo caso, per preservare la compatibilità con i browser in commercio, dovrai utilizzare più versioni di codice. Digita il seguente testo dopo la parentesi graffa chiusa dell'elemento CSS "body":[6] 
      @-webkit-keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
@keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
    • Nota che le due regole (@-webkit-keyframes e @keyframes utilizzano i medesimi colori e le medesime percentuali. Questi valori devono essere identici in modo che l'animazione grafica risulti uguale indipendentemente dal browser utilizzato.
    • Le percentuali (0%, 25%, eccetera) sono relative alla lunghezza totale dell'animazione (60s). Quando la pagina web verrà caricata, il colore dello sfondo sarà determinato dai parametri 0% (#33FFF3). Quando l'animazione raggiungerà il 25% dei 60 secondi della sua durata complessiva il colore dello sfondo sarà #7821F e così via, in base alle istruzioni indicate nel codice HTML.
    • Puoi personalizzare le tempistiche e i colori dell'animazione in base alle tue esigenze.
  4. Immagine titolata 2609629 20 2
    4
    Esamina il codice finale. Arrivato a questo punto il codice HTML che gestisce lo sfondo animato della tua pagina web dovrebbe essere simile al seguente: 
      <!DOCTYPE html>
<html>
<head>
<style>
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
}
@-webkit-keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
@keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}   
</style>
</head>
<body>
</body>
</html>
    Pubblicità

Consigli

  • Se vuoi utilizzare dei colori di base come sfondo, puoi inserire il nome direttamente all'interno del codice HTML in sostituzione del simbolo # e del codice esadecimale. Per esempio per creare uno sfondo arancione, puoi usare il seguente codice background-color: orange;.
  • Usando il codice HTML puoi anche usare un'immagine come sfondo di una pagina web.
Pubblicità

Avvertenze

  • Prima di pubblicare le nuove modifiche del sito testane la funzionalità in locale sul tuo computer.
Pubblicità

wikiHow Correlati

Impostare la Larghezza e l'Altezza di un Immagine in HTML
Come
Impostare la Larghezza e l'Altezza di un Immagine in HTML
Aggiungere un Link a un'Immagine
Come
Aggiungere un Link a un'Immagine
Hackerare
Come
Hackerare
Allineare Elementi in HTML
Come
Allineare Elementi in HTML
Controllare la Versione di un Server PHP
Come
Controllare la Versione di un Server PHP
Compilare ed Eseguire un Programma Java Utilizzando il Prompt dei Comandi
Come
Compilare ed Eseguire un Programma Java Utilizzando il Prompt dei Comandi
Centrare un'Immagine Usando il Codice HTML
Come
Centrare un'Immagine Usando il Codice HTML
Digitare un TrattinoIl modo migliore per Digitare un Trattino
Come
Inserire gli Spazi in HTML
Creare un Menu a Tendina in HTML e CSS
Come
Creare un Menu a Tendina in HTML e CSS
Inserire una Linea Orizzontale in HTML
Come
Inserire una Linea Orizzontale in HTML
Diventare un Hacker
Come
Diventare un Hacker
Aprire un File XML
Come
Aprire un File XML
Creare un Virus
Come
Creare un Virus
Pubblicità

Riferimenti

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
  2. ↑ http://www.w3schools.com/css/css_background.asp
  3. ↑ https://css-tricks.com/css3-gradients/
  4. ↑ http://www.w3schools.com/css/css3_gradients.asp
  5. ↑ https://codepen.io/metagrapher/pen/tgcLl
  6. ↑ http://www.w3schools.com/css/css3_animations.asp

Informazioni su questo wikiHow

Lo Staff di wikiHow
Co-redatto da:
Lo Staff di wikiHow
Staff di wikiHow - Redazione
Questo articolo è stato scritto in collaborazione con il nostro team di editor e ricercatori esperti che ne hanno approvato accuratezza ed esaustività.

Il Content Management Team di wikiHow controlla con cura il lavoro dello staff di redattori per assicurarsi che ogni articolo incontri i nostri standard di qualità. Questo articolo è stato visualizzato 26 422 volte
Categorie: Programmazione
Pubblicità