pevere web css design accessibilità e usabilità 

Posizionamento delle immagini di background

Il posizionamento delle immagini di background si riferisce sempre e comunque al selettore div in qui l’immagine sarà visualizzata.

Partiamo dalla proprietà background-position. Per prima cosa si deve definire l’eventuale non ripetitività dell’immagine, in quanto di default il valore è “repeat”. Repeat significa che l’immagine viene ripetuta lungo l’asse delle x e quello delle y fino al riempimento totale dello schermo. Per evitare questo, basterà settare la proprietà background-repeater a “no-repeat”. Fatto questo la nostra immagine apparirà come una unica istanza da posizionare da qualche parte all’interno del selettore div di appartenenza. E’ molto importante la sintassi della regola da assegnare, in quanto i valori di posizionamento hanno una esatta sequenza. Prima di tutto viene definito l’asse x, per cui sinistra destra. I valori possono essere fissi o percentuali e fanno sempre riferimento a partire dal lato sinistro del box, a meno che non si usi la parola chiave right. Per l’appunto, esiste la possibilità di usare parole chiave come top, left, right e bottom per allineare l’immagine all’asse x o y in dipendenza dei casi.

#contenitore {
width: 500px;
height: 500px;
background: transparent url(img/freccia.jpg) no-repeat;
 background-position: 75%;
}

Questa regola posizione l’immagine a ¾ sull’asse x e al 50% su quello y, visto che il valore y è stato omesso. Diversamente se avessi indicato come valore 75% 10%, oltre a posizionare l’immagine a ¾ sull’asse y, sarebbe stata spostata del 10% in basso rispetto al margine top del selettore lungo l’asse y.

In questo modo, noi possiamo posizionare con i css una immagine in un punto qualsiasi all’interno di un selettore, tenendo presente sempre che i valori omessi equivalgono al 50%, mentre la sequenza di inserimento è asse x e poi asse y.

Si può ovviamente usare la sintassi sintetica per definire il background, ricordandosi di rispettare la corretta sequenza dei valori da inserire, come nell’esempio:

#contenitore {
width: 500px;
 height: 500px;
background: transparent url(img/freccia.jpg) 75% 0 no-repeat;
}

L’immagine viene posizionata in una unica istanza, lungo il margine top del selettore ed in una posizione pari al 75% della lunghezza dello stesso partendo dal margine sinistro.

Aggiungi il Tuo Commento:





Inviando questa risposta dichiaro di aver letto ed approvato le condizioni di utilizzo di questo sito web.

(*) = campo obbligatorio.

Condizioni di Utilizzo

1 - Tutte le risposte inviate a questo sito saranno sottoposte a moderazione manuale da parte dell'amministratore al fine di evitare il fenomeno detto "SPAM".

2 - Tutti i dati inseriti nel modulo di risposta verranno pubblicati in questa pagina ad eccezione dell'e-mail. Tale informazione viene richiesta ed archiviata dagli amministratori al fine di scoraggiare un utilizzo non consono del blog.

3 - Non utilizzare le risposte per pubblicizzare il tuo sito web. Tale tentativo verrà cancellato dall'amministratore. In ogni caso ai link inseriti nelle risposte viene applicato il "nofollow" per cui non ti portano vantaggi.