Potresti pensare che il design dello sfondo sia semplice, ma i CSS hanno molte proprietà oscure e potenti da imparare.

Il tema di sfondo del tuo sito Web può influire in modo significativo sul suo aspetto grafico. Colori, immagini e motivi di sfondo evocano emozioni e creano fantastiche esperienze utente.

Puoi utilizzare le proprietà di sfondo CSS per impostare lo stile di sfondo degli elementi HTML. Scopri tutto su alcune delle proprietà CSS che puoi utilizzare per creare sfondi eccellenti.

1. colore di sfondo

IL proprietà del colore di sfondo imposta il colore dello sfondo di un elemento. Puoi impostare il colore usando un nome come "rosso", un valore HEX come "#00FF00" o un valore RGB - come "rgb (0, 255, 0)". È inoltre possibile utilizzare un valore HSL per impostare il colore di sfondo utilizzando tonalità, saturazione e luminosità.

L'esempio seguente imposta il colore di sfondo dell'intera pagina su arancione. Gli elementi di intestazione hanno ciascuno uno sfondo diverso.

<corpo>
<h2>Sono verdeh2>
<h3>Sono Rossoh3>
<h4>Io sono bluh4>
corpo>
instagram viewer

Usando i CSS, puoi applicare un colore di sfondo univoco a ciascun elemento:

corpo {
colore di sfondo: arancia;
}
h2 {
colore di sfondo: #006600;
}


h3 {
colore di sfondo: rgb(128, 0, 0);
}
h4{
colore di sfondo: hsl(240, 100%, 50%);
}

Questo modellerà la pagina in modo che assomigli a:

È possibile utilizzare la proprietà opacità per determinare la trasparenza di un elemento. L'opacità assume valori compresi tra 0.0 e 1.0. Più basso è il valore, più trasparente è l'elemento.

Ad esempio, prova a impostare l'opacità di un elemento del corpo su 0,5:

corpo {
colore di sfondo:arancia;
opacità:0.5;
}

Verrà visualizzato come segue: confronta i colori con quelli dello screenshot precedente:

2. immagine di sfondo

La proprietà background-image imposta un'immagine come sfondo di un elemento. Puoi fare riferimento a un'immagine locale o a una da Internet.

<corpo>
 <h1>CiaoLà!h1>
 <P>IOAvereUNImmagineInMiosfondo!P>
corpo>

Il file CSS:

corpo {
immagine di sfondo:url("https://immagini.pexel.com/fotografie/1191710/pixel-foto-1191710.jpeg?auto=comprimere&cs=tinysrgb&w=1260&H=750&dpr=1");
}

Verrà visualizzato in questo modo:

Puoi anche usare gradienti di sfondo per creare un look unico per la tua applicazione.

3. sfondo-ripetizione

La proprietà background-image ripete le immagini per impostazione predefinita. Puoi scegliere di ripetere l'immagine orizzontalmente sull'asse x o verticalmente sull'asse y.

In alternativa, se una ripetizione non si adatta al tuo stile, puoi rimuoverla utilizzando il valore senza ripetizione.

<corpo>
<h1>Ciao!h1>
<h3>Sto dimostrando la proprietà repeat background-repeat sull'asse x!h3>
corpo>

Usa il seguente CSS per applicare uno sfondo ripetuto lungo l'asse x:

corpo {
immagine di sfondo: URL("https://immagini.pexel.com/fotografie/459335/pixel-foto-459335.jpeg?auto=comprimere&cs=tinysrgb&w=1260&H=750&dpr=1");
sfondo-ripetizione: ripeti-x;
}

Il risultato:

Successivamente, prova a ripetere l'immagine sull'asse y:

corpo {
immagine di sfondo:url("https://CDN.pixabay.com/foto/2016/04/18/22/05/conchiglie-1337565__340.jpg");
sfondo-ripetizione: ripeti-y;
}

Il risultato:

L'esempio sull'asse y sembra certamente distorto. Se questi non sono i modelli che stai cercando, puoi specificare senza ripetizione Invece:

corpo {
immagine di sfondo:url("https://immagini.pexel.com/fotografie/259915/pixel-foto-259915.jpeg?auto=comprimere&cs=tinysrgb&w=600");
sfondo-ripetizione:senza ripetizione;
}

Il risultato:

4. posizione di sfondo

La proprietà background-position definisce la posizione dell'immagine di sfondo all'interno del suo elemento. Utilizza parole chiave specifiche per la posizione come centro, superiore, E metter il fondo ao un pixel o un valore percentuale.

Aggiungi una proprietà background-position all'ultima immagine:

corpo {
immagine di sfondo: URL("https://immagini.pexel.com/fotografie/259915/pixel-foto-259915.jpeg?auto=comprimere&cs=tinysrgb&w=600");
posizione di sfondo: superiorecentro;
}

Sembrerà così:

Puoi vedere che l'immagine distorce l'aspetto del sito web. Risolviamolo con la prossima proprietà.

5. dimensione dello sfondo

È possibile utilizzare la proprietà dell'immagine di sfondo per definire una dimensione specifica per l'immagine. Utilizza parole chiave come copertina E contenere o un pixel o un valore percentuale. Correggiamo l'immagine di sfondo distorta aggiungendo una proprietà background-size.

corpo {
 immagine di sfondo: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compressione&cs=tinysrgb&w=600");
 background-repeat: nessuna ripetizione;
 posizione sullo sfondo: centro;

Il risultato mostra che l'immagine ora copre la pagina web in modo proporzionale.

6. sfondo-attaccamento

La proprietà background-attachment definisce se la posizione dell'immagine di sfondo rimane fissa o scorre. Puoi usare le parole chiave fixed o scroll.

Mostriamolo nel seguente codice:

<corpo>
<h1>La proprietà background-attachmenth1>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
<P>Con la proprietà fixed attachment noterai che lo sfondo non si muove con il testo.P>
corpo>

Il file CSS:

corpo {
immagine di sfondo: URL("https://immagini.pexel.com/fotografie/96627/foto-pexel-96627.jpeg?auto=comprimere&cs=tinysrgb&w=600");
sfondo-ripetizione: senza ripetizione;
posizione di sfondo: centro;
dimensione dello sfondo: copertina;
sfondo-attaccamento: fisso;
}

Se sposti la pagina verso il basso, noterai che lo sfondo non si sposta:

Per dimostrare la proprietà scroll background-attachment, modificare la parola chiave in scorrere. Noterai che ora lo sfondo si sposta con il testo.

corpo {
immagine di sfondo: URL("https://immagini.pexel.com/fotografie/96627/foto-pexel-96627.jpeg?auto=comprimere&cs=tinysrgb&w=600");
sfondo-ripetizione: senza ripetizione;
posizione di sfondo: centro;
dimensione dello sfondo: copertina;
sfondo-attaccamento: scorrere;
}

7. Lo sfondo Proprietà abbreviata

Potresti notare che devi includere diverse proprietà per ottenere lo sfondo perfetto. Ciò comporta la scrittura di molto codice. Ma puoi abbreviare il codice usando la proprietà background shorthand.

La proprietà abbreviata consente di impostare molte proprietà di sfondo in una singola riga. Tu usi la parola chiave sfondo per impostare la proprietà abbreviata.

Ad esempio, invece di scrivere codice come questo:

corpo {
colore di sfondo: verde;
immagine di sfondo: URL("computer portatile3.jpg");
sfondo-ripetizione: senza ripetizione;
dimensione dello sfondo: copertina;
sfondo-attaccamento: scorrere;
posizione di sfondo: centro;
}

Puoi scriverlo in una sola riga, in questo modo:

corpo {
sfondo: verdeURL("computer portatile3.jpg") senza ripetizionecopertinascorrerecentro;
}

La proprietà abbreviata segue un ordine particolare. È necessario allineare le proprietà in tale ordine anche se ne mancano una o più. L'ordine è:

  • colore di sfondo
  • immagine di sfondo
  • sfondo-ripetizione
  • sfondo-attaccamento
  • posizione di sfondo

Puoi creare progetti interessanti con i CSS usando vari modelli di sfondo. Con questi modelli, puoi ottenere sfondi unici ed eccezionali per il tuo sito web.

Altre proprietà dello sfondo nei CSS

CSS è potente e puoi fare molto con esso per ravvivare la tua applicazione. Puoi usare proprietà come background-clip, background-origin e background-blend-mode per aggiungere qualche animazione.

Puoi anche utilizzare gradienti e motivi per personalizzare le tue pagine. Sperimenta con le proprietà di sfondo CSS per affinare le tue capacità di web design.