Home » Tutorials » CSS background
CSS background
Il colore di sfondo (background) dei vari elementi di una pagina HTML è senz'altro uno degli aspetti caratterizzanti di un sito web. Scegliere una buona combinazione di colori tra i vari elementi che costituiscono la pagina rende il sito gradevole oltre a contraddistinguerlo nella moltitudine di siti che popolano il web. I colori che andremo a scegliere potranno essere di "fantasia" oppure legati a colori che già caratterizzano l'immagine di un'azienda. L'importante è scegliere una combinazione cromatica gradevole e che rispetti il giusto contrasto tra colore di sfondo e colore del testo in modo da consentire una lettura agevole e non stancante per gli occhi dei nostri utenti.
Vediamo innanzitutto come impostare un colore di sfondo di una pagina HTML mediante le proprietà CSS degli elementi:
body { background-color: #B2A276; }
o
body { background: #B2A276; }
In questo caso abbiamo applicato un colore a tinta piatta (definito dal codice in esadecimale #B2A276) allo sfondo della pagina.
#container { background: #FFF; }
In quest’altro esempio abbiamo invece applicato il colore #FFF (bianco) allo sfondo dell’elemento della pagina container.
Vediamo adesso come applicare un’immagine di sfondo.
body {
background-color: #111;
background-image: url("images/bg.jpg");
background-repeat: repeat;
}
In questo caso abbiamo applicato il colore #111 e poi un'immagine mediante l'URL "images/bg.jpg". Fate attenzione che l'URL deve essere definita in base alla posizione del file CSS, per questo nostro esempio presuppongo che il file CSS si trovi nella cartella radice (root) del sito che contiene anche le pagine HTML e che le immagini siano collocate all'interno della cartella "images". Se avessi collocato il file CSS dentro una cartella denominata (ad esempio) “/css” allora l'URL sarebbe stato "../images/bg.jpg".
Per ultimo ho inserito la direttiva "repeat" che ripete l'immagine sia in orizzontale che in verticale per tutta l'ampiezza della pagina (essendo la direttiva di default non sarebbe stato necessario inserirla).
Le istruzioni impartite nell’esempio precedente si possono sintetizzare nella seguente riga:
body { background: #111 url("images/bg.jpg") repeat; }
La direttiva background-repeat può assumere 4 valori: repeat (default, replica l’immagine in orizzontale e in verticale), no-repeat (non ripete l’immagine in nessuna direzione), repeat-x (replica l’immagine solo in orizzontale), repeat-y (replica l’immagine solo in verticale). Ecco un esempio nel quale ripetiamo l’immagine di sfondo in orizzontale:
body { background: #111 url("images/bg.jpg") repeat-x; }
Oltre a questa semplice sintassi background ha un’altra proprietà che ci permette di controllare la posizione della nostra immagine di sfondo:
body {
background-color: #111;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-position: left top;
}
La proprietà background-position ammette 2 valori:
- la posizione orizzontale mediante left, right, e center
- la posizione verticale mediante top, bottom e center
La posizione orizzontale e verticale può anche essere espressa tramite valori numerici o percentuali. I valori numerici o percentuali indicheranno la distanza dai bordi sinistro e superiore della finestra del browser. Con questa istruzione:
background-position: 50px 20px;
diciamo che la nostra immagine deve essere posizionata a 50px dal bordo sinistro della finestra del browser e a 20px dal bordo superiore.
E se volessimo centrare la nostra immagine orizzontalmente? Ecco l’istruzione:
background-position: center top;
oppure l'equivalente espressa con valori percentuali
background-position: 50% 0%;
ed ecco la nostra proprietà scritta su di un’unica riga:
body {
background: #111 url("images/bg.jpg") center top no-repeat;
}
Infine vediamo l’ultima proprietà: background-attachment.
Background-attachment ci consente di rendere l'immagine statica (fixed) rispetto
al contenuto della pagina che può scrollare verso l'alto oppure l'immagine di sfondo
scrolla (scrooll, valore di default) insieme al resto della pagina.
body {
background-color: #111;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
o
body {
background: #111 url("images/bg.jpg") left top no-repeat fixed;
}