Immagini di background con i CSS

Con i CSS possiamo anche gestire le immagini, utilizzate come sfondo. Perchè usare i fogli di stile anche con le immagini invece di utilizzare un comando HTML? Perchè si possono assegnare delle particolari caratteristiche, impossibile o quasi, con il solo HTML, ammenochè non si ricorre alle tabelle.

Le proprietà da associare alle immagini di background

Esistono diverse proprietà css che possono essere associate con le immagini; esse sono: 

• repeat-y
• repeat-x
• repeat
• no-repeat

Proprietà repeat-y

Se volessimo far ripetere una immagine in verticale, la prima proprietà - repeat-y - fa al nostro caso; infatti possiamo avere una pagina con a sinitra, per esempio, una ripetizione "infinita"; vale a dire fino a quando i contenuti non raggiungono la fine del viewport del browser. Una pagina di esempio mostra in azione la proprietà "repeat-y".

Proprità repeat-x

Parallelamente alla proprietà repeat-y, abbiamo anche repeat-x; in questo modo possiamo avere una immagine che si ripete - ipotizzando un'asse sulle ascisse - solo in orizzontale. Anche in questo caso ho approntato una pagina di esempio con questa caratteristica.

Proprietà repeat

Nel caso in cui abbiamo una bella immagine e volessimo farla ripetere a tutta pagina, viene in aiuto la terza proprietà: repeat. Essa fa estendere a tutto schermo il nostro background. Pagina di esempio.

Proprietà no-repeat

Essa si distingue dalle altre in quanto non fa ripetere, come suggerisce lo stesso nome, l'immagine di sfondo. Per poterne usufruire, dobbiamo solo scrivere no-repeat subito dopo il path per raggiungere l'immagine. Possiamo averla, per esempio, fissa in alto a sinistra nella pagina web. Il quarto ed ultimo esempio ci fa vedere l'immagine ferma.