[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!!

[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...

Originariamente inviato da Vheon

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

il tag

Codice PHP:

<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.

Originariamente inviato da serpico84

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!!