Come linko un background?

[Mister]

Ciao..

sto cercando di fare un sito xhtml+css...
nel foglio di stile ha un img di sfondo

background: #fff url(logo.gif) no-repeat;

adesso che codice devo inserire nel htm per rendere l'immagine un link?

Grazie

[pierofix]

Non si possono linkare le immagini di sfondo.

Puoi invece utilizzare l'image-replacement, ovvero una cosa del genere:

<h1 id="logo">NomeAzienda.it</h1>

#logo a {
   text-indent:-9999px;
   width:200px; height:200px;
   background:#fff url(logo.png) no-repeat 0 0;
}

[Mich_]

Uno sfondo e` uno sfondo, non puo` essere un link.

Se l'immagine fa parte del contenuto significativo della pagina, non deve stare in bg, ma deve essere linkata con <img>

In alternativa potresti inserire un'immagine trasparente e farla diventare un link. Solo che e` una pratica che va contro le norme di accessibilita` (chi non visualizza il bg non sa dove potrebbe cliccare o si trova un link assolutamente invisibile).

[Mister]

Grazie per la tempestività..

andando a spulciare i file css di chi si è affermato negli standard-web, notavo che usano questo sistema:

.nospan a span{display: none;}
.img{ background: transparent url(img.jpg) no-repeat;}

poi richiamati cosi

<div class="nospan"><span>bla</span></div>

A loro funziona a me no... cioè il link bla non è visibile ma l'immagine non diventa un link...

[pierofix]

Hai provato con la soluzione che ti ho postato sopra? Eliminini anche lo span dentro l'a, che è superfluo.

[ L'idea credo sia di Mr. Zeldman ( www.zeldman.com ) ]

[Mister]

Originariamente inviato da pierofix
Hai provato con la soluzione che ti ho postato sopra? Eliminini anche lo span dentro l'a, che è superfluo.

[ L'idea credo sia di Mr. Zeldman ( www.zeldman.com ) ]

Adesso ci provo subito...

Zeldman... mitico ... stò leggendo il suo ultimo libro..
infatti il css preso in esempio è uno dei suoi

[Mister]

Non mi funziona...

#logo a {
width: 760px;
height: 70px;
text-indent:-9999px;
position: relative;
top: 0px;
left: 0px;
background:#fff url(img2/logo.gif) no-repeat 0 0;
}


<h1 id="logo">NomeAzienda.it</h1>

eppure ho controllato bene me non mi sembra di avere omesso niente rispetto al tuo esempio...

[pierofix]

Perchè usi i posizionamenti? Non riesci a farne a meno, utilizzando solo i margini e i float? Per esperienza personale, vedo che si evitano molti problemi.

Comunque, che cosa vedi? Che tipo di problema incontri? Non vedi l'immagine, non si clicca, ...?

[Mister]

In IE non vedo niente... in firefox leggo nomeazienda.it e sotto l'immagine minuscola grande come tutta la scritta..

[pierofix]

Ah, che pirla che sono! Devi aggiungere questo: display:block;.

Scusa ancora.