[HTML/CSS] Link con solo immagine

[serpico84]

Vorrei creare un link con solo l'immagine ma non con il classico <img> ma tramite css (visto che lo devo riutilizzare). Per farmi capire meglio vi faccio vedere come ho provato:

nell'html ho il link:

<a href="link" title="Modifica" class="modifica"></a>

e nel CSS ho:


.modifica
{
background-image:url("../images/pencil.jpg");

}

o in alternativa ho provato anche:


.modifica
{
background: transparent url(../images/pencil.jpg) no-repeat;

}

ma niente l'immagine non si vede, si vede solo come sfondo se inserisco del testo tra il tag <a></a>. Lo so che si puo fare con <img> ma devo stare ogni volta ad aggiungere la stringa src con l'url dell'immagine su ogni pagina e pensavo che i css mi avrebbero aiutato a semplificare!

Chiedo lumi!!:mc:

[Vheon]

se non erro come hai fatto tu non funziona perche' il tag <a> non ha la proprieta' "background-image" e simili.

di primo getto avrei fatto cosi:

cosi nel css

.modifica
{
background-image: url("??????");
width: ???px;/*<--questi vanno messi altrimenti l'immagine non si vede*/
height:???px;/*<-- */
}


e cosi nell'html:

<a href="#"><div class="modifica"></div></a>


non e' pulitissima come soluzione, pero' se ti serve e non sai come fare funziona... ;)

[serpico84]

grazie mille funziona! solo che l'immagine è spostata tutta a sinistra e non riesco a centrarla col text-align...

[anonimizzato]

se non erro come hai fatto tu non funziona perche' il tag <a> non ha la proprieta' "background-image" e simili.

il tag <a> non è che non abbia una regola come background-image è che di default è un elemento inline quindi per creare un area "sensibile" sullo schermo con dimensioni sufficienti per farci stare l'immagine di sfondo bisogna dargli un display:block e specificargli un width ed height.

[anonimizzato]

grazie mille funziona! solo che l'immagine è spostata tutta a sinistra e non riesco a centrarla col text-align...

la centri con background-position text-align (come suggerisce il nome) serve per allineare il testo.

[serpico84]

grazie mille Sgurbat!!