Teoria
Teoria

Proprietà background

Lo sfondo di un elemento può essere impostato utilizzando proprietà separate: background-color, background-image e così via. Ciò comporta una voce piuttosto ingombrante.

È anche possibile impostare lo sfondo utilizzando la proprietà background abbreviata, che elenca i suoi componenti attraverso uno spazio:

background: [bc] [bi] [br] [bp] [ba];
/* Simboli:
[bc] — background-color
[bi] — background-image
[br] — background-repeat
[bp] — background-position
[ba] — background-attachment
*/

Se non viene specificato alcun componente, viene assunto il valore predefinito. Di seguito sono riportati alcuni esempi.

background: #e74c3c;
background: url("img.png") no-repeat;
background: url("img.png") 10px 20px;

Il primo esempio imposta semplicemente il colore di sfondo.

Il secondo esempio imposta un'immagine di sfondo non ripetitiva e predefinisce un colore di sfondo trasparente, posizionato nell'angolo in alto a sinistra.

Il terzo esempio imposta l'immagine di sfondo e la sua posizione, nonché il colore di sfondo trasparente predefinito e una modalità di ripetizione generale.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title>Proprietà background</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"> Gatto ipnotista </div> <div class="block block2"> Un gatto e un pesce </div> </body> </html>

CSS

body { padding: 20px; font-size: 20px; font-family: "Tahoma", sans-serif; } .block { width: 200px; margin: 25px auto; padding: 25px 0; padding-left: 90px; color: white; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background: none; } .block2 { background: none; }

ObiettiviFatto

Impostare lo sfondo del primo blocco: colore di sfondo #e74c3c, immagine cat_eyes.png, nessuna ripetizione, posizionamento dell'immagine 10px a sinistra e 5px in alto.
Impostare lo sfondo del secondo blocco: colore di sfondo #2980b9, immagine cat_fish.png, nessuna ripetizione, posizionamento dell'immagine 10px a sinistra e 5px in alto.