Come Impostare il Colore di Sfondo in HTML

Scritto in collaborazione con: Lo Staff di wikiHow

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

Metodo 1 di 4:
Passi Iniziali

  1. 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. 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. 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. 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. 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 di 4:
Usare un Colore a Tinta Unita

  1. 1
    Individua la sezione "html" del documento. Dovrebbe essere visibile nella parte superiore del file.
  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. 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. 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. 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 di 4:
Usare un Gradiente Come Sfondo

  1. 1
    Individua la sezione "html" del documento. Dovrebbe essere visibile nella parte superiore del file.
  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. 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. 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. 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. 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 di 4:
Creare uno Sfondo Animato

  1. 1
    Individua la sezione "html" del documento. Dovrebbe essere visibile nella parte superiore del file.
  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. 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. 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à

Informazioni su questo wikiHow

Scritto in collaborazione con:
Redazione di wikiHow
Questo articolo è stato scritto in collaborazione con il nostro team di editor e ricercatori esperti che ne hanno approvato accuratezza ed esaustività.
Categorie: Programmazione

Hai trovato utile questo articolo?

No
Pubblicità