Come Impostare il Colore di Sfondo in HTML

Scritto in collaborazione con: Lo Staff di wikiHow

Per impostare il colore di sfondo di una pagina web in HTML, ti basta fare una rapida modifica all'elemento "body" all'interno dei tag <style></style>. I passaggi da seguire sono leggermente diversi a seconda dell'effetto che vuoi ottenere. Impara a impostare come sfondo del tuo sito web un colore in tinta unita, un'immagine, un gradiente o un'animazione a più colori.

Metodo 1 di 4:
Impostare un Colore Uniforme come Sfondo

  1. 1
    Apri il file HTML con il tuo editor di testo preferito. Con HTML5, l'attributo HTML <bgcolor> non è più supportato. I colori di sfondo, insieme a tutti gli altri aspetti estetici della pagina, dovrebbero essere gestiti con CSS.[1]
  2. 2
    Aggiungi i tag <style></style> al tuo documento. Tutte le informazioni sullo stile della pagina (incluso il colore di sfondo) dovrebbero essere inserite tra questi tag. Se hai già inserito i tag <style>, ti basta scorrere fino a quella parte del file.
    <!DOCTYPE html>
    <html>
    <head>
    
    <style>
    
    </style>
    
    </head>
    </html>
    
  3. 3
    Digita l'elemento "body" all'interno dei tag <style></style>. Tutte le modifiche all'elemento "body" in CSS influenzano l'intera pagina.
    <!DOCTYPE html>
    <html>
    <head>
    
    <style>
    body { 
    
    }
    
    </style>
    </head>
    <body>
    </body>
    
    </html>
    
  4. 4
    Aggiungi la proprietà "background-color" all'elemento "body".
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        background-color: 
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    
  5. 5
    Aggiungi il colore che desideri alla proprietà "background-color". Puoi digitare il colore per nome (green, blue, red, eccetera), usare i codici esadecimali (hex) per inserire la tonalità che preferisci (ad esempio #000000 per il nero, #ff0000 per il rosso, eccetera) oppure digitare il valore RGB del colore (ad esempio rgb(255,255,0) per il giallo). Ecco un esempio che fa uso dell'espressione esadecimale per rendere il colore di sfondo uguale a quello del banner di wikiHow:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        background-color: #93B874;
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    
    Advertisement
  • Bianco: #FFFFFF
  • Rosa chiaro: #FFCCE6
  • Terra di siena bruciata: #993300
  • Indaco: #4B0082
  • Viola: #EE82EE
  • Visita la pagina di w3schools.com, HTML Color Picker, per trovare i codici esadecimali di tutti i colori più comuni.
  • Usa "background-color" per applicare il colore di sfondo agli altri elementi. Così come hai aggiunto questa parola chiave all'elemento body, puoi utilizzarla per definire il colore di sfondo di altre parti della pagina. Inserisci gli elementi da modificare all'interno dei tag <style></style>, con la proprietà background-color.[2]
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        background-color: #93B874;
    }
    h1 {
        background-color: orange;
    }
    p {
        background-color: rgb(255,0,0);
    }
    </style>
    </head>
    <body>
    <h1>Questo titolo ha lo sfondo arancione</h1>
    <p>Questo paragrafo ha lo sfondo rosso</p>
    </body>
    </html>
    
  • Metodo 2 di 4:
    Usare un'Immagine come Sfondo

    1. 1
      Apri il file HTML con il tuo editor di testo preferito. Molte persone preferiscono usare immagini come sfondo per i propri siti web. Questo consente di realizzare lo sfondo con un disegno, un motivo, una foto o qualunque altro tipo di immagine. Con HTML5, tutti i tipi di sfondo dovrebbero essere configurati con il linguaggio CSS (Cascading Style Sheets), all'interno dei tag <style></style>.
    2. 2
      Aggiungi i tag <style></style> al tuo documento. Tutte le informazioni sullo stile della pagina (incluso il colore di sfondo) dovrebbero essere inserite tra questi tag. Se hai già inserito i tag <style>, ti basta scorrere fino a quella parte del file.
      <!DOCTYPE html>
      <html>
      <head>
      
      <style>
      
      </style>
      
      </head>
      </html>
      
    3. 3
      Digita l'elemento "body" all'interno dei tag <style></style>. Tutte le modifiche all'elemento "body" in CSS influenzano l'intera pagina.
      <!DOCTYPE html>
      <html>
      <head>
      
      <style>
      body { 
      
      }
      
      </style>
      </head>
      <body>
      </body>
      
      </html>
      
    4. 4
      Aggiungi la proprietà "background-color" all'elemento "body". Una volta fatto, ti servirà il nome dell'immagine. Assicurati che il file si trovi nella stessa cartella della pagina HTML (altrimenti devi inserire il percorso completo del file sul web server).[3]
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      body {
          background-image: url("nomeimmagine.png");
          background-color: #93B874;
      }
      </style>
      </head>
      <body>
      </body>
      </html>
      
      Advertisement
    • È una buona idea aggiungere comunque la proprietà background-color, nel caso in cui l'immagine non dovesse essere caricata.
  • Sovrapponi più immagini. Puoi mettere più immagini una sopra l'altra. Questo può essere utile se hai a disposizione disegni con sfondo trasparente che si completano se sovrapposti.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        background-image: url("immagine1.png"), url("immagine2.gif");
        background-color: #93B874;
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    
    • La prima immagine comparirà in alto. La seconda dietro la prima.

    Metodo 3 di 4:
    Creare uno Sfondo con Gradiente

    1. 1
      Usa CSS per creare uno sfondo con gradiente. Se cerchi una soluzione stilisticamente più efficace di un semplice colore in tinta unita, ma non confusa come le animazioni multicolore, prova questo tipo di sfondo. I gradienti sono colori che si trasformano in altre tonalità. Puoi usare CSS per crearne e personalizzarne uno. Prima di provare, assicurati di comprendere le basi del linguaggio CSS.
    2. 2
      Impara la sintassi di base. Per realizzare un gradiente, ti servono due informazioni: il punto o angolo di partenza e i colori da utilizzare. Puoi scegliere più colori in modo che il gradiente passi da uno all'altro e puoi decidere la direzione in cui avviene la trasformazione.[4]
      background: linear-gradient(direzione/angolo, colore1, colore2, colore3, eccetera);
      
    3. 3
      Crea un gradiente verticale. Se non specifici alcuna direzione, il gradiente va dall'alto verso il basso. I vari browser implementano in modo diverso questa funzione, quindi devi includere più di una versione del codice.
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      html {
          min-height: 100%; /* Questo comando è necessario per garantire che il gradiente occupi tutta la pagina */
      }
      
      body {
          background: -webkit-linear-gradient(#93B874, #C9DCB9); /* Chrome 10+, Safari 5.1+ */
          background: -o-linear-gradient(#93B874, #C9DCB9); /* Opera 11.1+ */
          background: -moz-linear-gradient(#93B874, #C9DCB9); /* Firefox 3.6+ */
          background: linear-gradient(#93B874, #C9DCB9); /* Sintassi standard (deve essere ultimo) */
          background-color: #93B874; /* È una buona idea impostare un colore di sfondo, nel caso in cui il gradiente non dovesse caricarsi */
      }
      </style>
      </head>
      <body>
      </body>
      </html>
      
    4. 4
      Crea un gradiente direzionale. Aggiungendo una direzione al gradiente puoi cambiare il modo in cui la trasformazione viene visualizzata. Nota che i vari browser interpretano i comandi in modo diverso. Tutti però producono il medesimo risultato.[5]
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      html {
          min-height: 100%;
      }
      
      body {
          background: -webkit-linear-gradient(left, #93B874, #C9DCB9); /* da sinistra a destra */
          background: -o-linear-gradient(right, #93B874, #C9DCB9); /* con finale a destra */
          background: -moz-linear-gradient(right, #93B874, #C9DCB9); /* con finale a destra */
          background: linear-gradient(to right, #93B874, #C9DCB9); /* che si trasforma verso destra */
          background-color: #93B874; /* È una buona idea impostare un colore di sfondo, nel caso in cui il gradiente non dovesse caricarsi */
      }
      </style>
      </head>
      <body>
      </body>
      </html>
      
    5. 5
      Usa altre proprietà per configurare il gradiente. Le possibilità a tua disposizione sono moltissime.
      Advertisement
    • Ad esempio, puoi aggiungere più di due colori e scegliere la percentuale di ciascuno. Questo consente di decidere quanto spazio attribuire a ogni segmento di colore.
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
      
    • Aggiungi trasparenza ai colori. Questa funzione li fa svanire. Usa lo stesso colore, definito con la funzione rgba(), in maniera da arrivare dalla sua tonalità alla trasparenza completa. Il valore finale determina la trasparenza: 0 per opaco e 1 per traslucido.
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
      

    Metodo 4 di 4:
    Impostare uno Sfondo che Cambia Colore

    1. 1
      Trova il tag <style> all'interno del codice HTML. Se non ti piacciono gli sfondi in tinta unita, prova a sperimentare con questo sfondo animato e cangiante. Con HTML 5, i colori di sfondo devono essere definiti in CSS (Cascading Style Sheets). Se non l'hai mai fatto prima, leggi Impostare un Colore Uniforme come Sfondo prima di provare questo metodo.
    2. 2
      Aggiungi la proprietà animation all'elemento "body". Vedrai due comandi diversi, specifici per i vari browser. [6]
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      body {
          -webkit-animation: cambiocolore 60s infinite; 
          animation: cambiocolore 60s infinite;
          }
      </style>
      </head>
      <body>
      </body>
      </html>
      
      Advertisement
    • -webkit-animation è la proprietà da utilizzare sui browser basati su Chromium (Chrome, Opera, Safari). animation è lo standard per tutti gli altri browser.
    • cambiocolore è il nome dell'animazione in questo esempio.
    • 60s è la durata (60 secondi) dell'animazione. Assicurati di impostarla per entrambi i codici.
    • infinite imposta l'animazione in modo che si ripeta continuamente. Se preferisci che i colori cambino una volta sola, prima di fermarsi sull'ultima tonalità, non inserire questo comando.
  • Scegli i colori dell'animazione. Adesso userai la regola @keyframes per impostare i colori di sfondo che saranno usati nell'animazione, oltre alla durata di ogni tonalità. Anche in questo caso, servono codici diversi per i vari browser.[7]
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    body {
        -webkit-animation: cambiocolore 60s infinite; 
        animation: cambiocolore 60s infinite;
    }
    
    
    @-webkit-keyframes cambiocolore {
    
         0%  {background: #33FFF3;}
        25%  {background: #78281F;}
        50%  {background: #117A65;}
        75%  {background: #DC7633;}
        100% {background: #9B59B6;}
    }
    
    
    @keyframes cambiocolore {
         0%  {background: #33FFF3;}
        25%  {background: #78281F;}
        50%  {background: #117A65;}
        75%  {background: #DC7633;}
        100% {background: #9B59B6;}
    }   
    
    </style>
    </head>
    <body>
    </body>
    </html>
    
    • Nota che le due regole (@-webkit-keyframes e @keyframes) hanno gli stessi colori e percentuali. Assicurati che i parametri siano identici, in modo che l'esperienza sia la stessa su tutti i browser.
    • Le percentuali (0%, 25%, eccetera) si riferiscono alla durata totale dell'animazione (60s). Una volta caricata la pagina, lo sfondo avrà il colore impostato allo 0% (#33FFF3). Dopo il 25% di 60 secondi, lo sfondo diventerà #78281F e via dicendo.
    • Puoi modificare tempi e colori in base alle tue esigenze.

    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
    Advertisement