Come cambiare il colore di sfondo con CSS

Uno dei momenti più emozionanti nella carriera di uno sviluppatore front-end in erba è imparare a cambiare il colore di sfondo di una pagina web.

Lavorare con HTML è fantastico e tutto, ma con poche righe di CSS puoi dare vita alle tue pagine e al tuo viaggio di programmazione.

Questa guida coprirà tutto ciò che devi sapere su come cambiare il colore di sfondo con CSS.

Preparati

Eliminiamo un po ‘di lavoro preliminare.

Nota : consiglio di utilizzare Visual Studio Code con l’ estensione Live Server per visualizzare le modifiche in tempo reale mentre aggiorni HTML e CSS.

  1. Crea una cartella per i file del tuo progetto.
  2. Crea un file index.html per ospitare il tuo HTML. Puoi utilizzare il codice boilerplate o semplicemente impostare alcuni tag <html> , <head> e <body> .
  3. Crea un file styles.css per il tuo CSS.
  4. Collega il tuo file CSS con l’HTML inserendo <link rel = “stylesheet” href = “styles.css”> all’interno dei tag <head> .

Ora sei pronto per iniziare a modificare il CSS.

Correlato: Come creare un sito Web Boilerplate

Come cambiare il colore di sfondo con CSS

Il modo più semplice per cambiare il colore di sfondo è scegliere come target il tag body . Quindi, modifica la proprietà del colore di sfondo . Puoi trovare i codici colore cercando e utilizzando l’estensione del browser Google Color Picker

body {
 background-color: rgb(191, 214, 255);
 }

Questo codice cambia lo sfondo in un bel azzurro.

La proprietà background-color accetta i colori in sei diverse forme:

  • nome : azzurro cielo; (per una buona approssimazione)
  • codice esadecimale : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); dove a è alfa (opacità)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); dove a è alfa (opacità)

Usa la proprietà shorthand background al posto di background-color per tagliare codice extra. Puoi modificare il colore di sfondo di qualsiasi elemento HTML utilizzando questo metodo.

Crea un elemento <div> e assegnagli una classe: in questo caso, la classe è pannello . Imposta le sue proprietà di altezza e larghezza in CSS. Seleziona l’elemento in CSS e colora.

body {
 background-color: rgb(191, 214, 255);
 }
 .container{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 90vh;
 }
 .panel {
 background: rgb(255, 148, 148);
 height: 10rem;
 width: 30%;
 }
 .muo-text {
 font-size: 3em;
 font-weight: bolder;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 position: absolute;
 }

Qui puoi vedere lo stile della proprietà dello sfondo del corpo indipendentemente dalla proprietà dello sfondo .panel .

La proprietà background accetta anche sfumature:

body {
 background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
 }

css sfondo sfumato con pannello Come cambiare l’immagine di sfondo in CSS

E se vuoi che lo sfondo sia un’immagine piuttosto che un colore solido o un gradiente? La proprietà dello sfondo della stenografia è un amico familiare.

Assicurati che l’immagine si trovi nella stessa cartella dei file HTML e CSS. Altrimenti dovrai usare il percorso del file tra parentesi anziché solo il nome:

body {
 background: url(leaves-and-trees.jpg)
 }

Whoah! Sembra che l’immagine sia troppo ingrandita. Puoi rimediare con la proprietà background-size .

body {
 background: url(leaves-and-trees.jpg);
 background-size: cover;
 }

Per usare la proprietà shorthand background insieme alla proprietà cover background-size , devi anche specificare le proprietà background-position e separare i valori con una barra rovesciata (anche se sono valori posizionali predefiniti come in alto a sinistra .)

body {
 background: url(leaves-and-trees.jpg) top left / cover;
 }

Ecco qua! Un’immagine di sfondo di dimensioni adeguate in una riga di CSS.

Ulteriori informazioni: come impostare un’immagine di sfondo in CSS

Nota : diffidare di includere immagini di sfondo di grandi dimensioni che occupano molto spazio di archiviazione. Questi possono essere difficili da caricare sui dispositivi mobili, dove hai tutti due secondi per dare agli utenti un motivo per rimanere sulla pagina.

Migliora il tuo gioco CSS con box-shadow CSS

Per uno sviluppatore come te, le proprietà background-color e background-image sono vecchie notizie. Fortunatamente, c’è sempre qualcosa di nuovo da imparare.

Prova a dare una spinta alle tue scatole con CSS box-shadow. I tuoi elementi HTML non sono mai stati così belli!