Le immagini di background vengono usate tipicamente per i loghi. I loghi sono di solito elementi h1 che contengono il nome del sito e che vengono rimpiazzati da una grafica in background. Oltre a presentare l’immagine di sfondo, il testo viene in qualche maniera nascosto. Si parla così di image-replacement. Ci sono diverse tecniche:

ICCM2006

Qui sopra, non vi è un elemento A nel testo (ad esempio, il logo è presentato in home page. L’immagine è come background, ma si vede ancora il testo. Inoltre lo sfondo non è colorato.

ICCM2006

Lo stesso esempio, ma con il passaggio successivo: testo posizionato fuori dal viewport e background dello stesso colore dell’immagine.

ICCM2006

Qui sopra, vi è un elemento A nel testo. Il replacement è presente su A. Il text-indent negativo dev’essere applicato ad A, che deve pure essere trasformato in elemento di blocco. Come si vede, però questo non è sufficiente. Cosa occorre ancora? Confrontate l’esempio qui sotto:

ICCM2006

ICCM2006

basata sul Cover-up span ma adattata alla presenza di un link funzionante anche senza css – Lo span interno è un elemento vuoto che copre, con l’immagine, il testo. Se non c’è l’immagine o il css, il testo rimane visibile.

ICCM2006

A riprova della difficoltà di una tecnica che risolva tutto con markup minimo e link funzionanti, anche quando le immagini sono disabilitate: ulteriore prova con una tecnica differente, ma non funzionante con link interno

Per metodi più complessi, e forse una soluzione che abbia tutti questi requisiti, vedere questa pagina, dove ne vengono esemplificate diverse (da studiare con calma a casa…).