Le tecniche css nude e crude sono poco interessanti visivamente. Ma i design con i CSS sono sempre più ricchi. Il tutto avviene grazie all’inserimento di immagini che non stanno nell’html, ma come sfondo degli elementi html definiti nei css. L’html così rimane scarno e leggibile senza il css attivo, ma visivamente molto ricco con i css.
Background image con ripetizione
Se questa è una a semplice immagine:
quando viene inserita come sfondo in un elemento (qui un DIV vuoto con ampiezza e altezza specificate) viene di norma ripetuta a tassello sia in orizzontale che in verticale:
Immagine ripetuta solo in orizzontale o in verticale
Molto utile per creare bordi diversi dai semplici bordi definibili via css.
Immagine ripetuta orizzontalmente:
Immagine ripetuta verticalmente :
E’ possibile così creare anche effetti di ombra:
Immagine:
Immagine ripetuta orizzontalmente :
Ripetere l’immagine una volta sola e posizionarla
Naturalmente un uso molto comune è quello di non ripetere l’immagine né in orizzontale né in verticale, ma di presentare l’immagine una sola volta, come sfondo dell’elemento:
E’ possibile posizionarla, ad esempio centrandola, in molti modi. Con parole chiave:
Con percentuali:
O, se si conosce la dimensione del div in pixel, con i pixel:
Per primo va indicato il valore orizzontale di posizionamento, per secondo quello verticale
Si noti che con i pixel il posizionamento non è uguale alle percentuali o alle parole chiave. Quando si posiziona con percentuali o parole chiave, i valori (ad esempio center o 50%) si riferiscono sì alla posizione del div, ma anche a quella dell’immagine. Che dunque viene posizionata, in questo caso, a partire dal centro (50%). Nel caso dei pixel, il valore in pixel si riferisce alle coordinate del div a partire dall’angolo in alto a sinistra, ma l’immagine viene SEMPRE posizionata partendo dal pixel in alto a sinistra dell’immagine. Quindi se dobbiamo centrare l’immagine con i pixel dobbiamo:
- Dividere a metà l’ampiezza del div
- conoscere l’ampiezza dell’immagine e calcolarne la metà
- Sottrarre questo valore alla metà dell’ampiezza del div
- Ripetere lo stesso in altezza
Se usassimo in pixel la metà esatta dei valori di ampiezza e altezza del div, otterremmo il seguente risultato:
Che è diverso da quello che vorremmo.