Ajouter un lien URL dans l'image d'arrière-plan CSS ?

Question

J'ai une entrée CSS qui ressemble à ceci :

.header {
    background-image: url("./images/embouchure.jpg");
    background-repeat: no-repeat;
    height:160px;
    padding-left:280px;
    padding-top:50px;
    width:470px;
    color: #eaeaea;
    border-bottom:1px solid #eaeaea;

}

Comment puis-je ajouter le lien vers l'image de fond dans ce CSS ?

Le CSS complet peut être trouvé aquí et le html qui utilise est là .

Answer 1

Essayez d'envelopper les travées dans une balise d'ancrage et d'y appliquer l'image d'arrière-plan.

HTML :

<div class="header">
    <a href="http://stackoverflow.com/">
        <span class="header-title">My gray sea design</span><br />
        <span class="header-title-two">A beautiful design</span>
    </a>
</div>

CSS :

.header {
    border-bottom:1px solid #eaeaea;
}

.header a {
    display: block;
    background-image: url("./images/embouchure.jpg");
    background-repeat: no-repeat;
    height:160px;
    padding-left:280px;
    padding-top:50px;
    width:470px;
    color: #eaeaea;
}

Answer 2

En utilisant uniquement le CSS, il n'est pas du tout possible d'ajouter des liens :) Il n'est pas possible de lier une image d'arrière-plan, ni une partie de celle-ci, en utilisant HTML/CSS. Cependant, il est possible de la mettre en scène en utilisant cette méthode :

<div class="wrapWithBackgroundImage">
    <a href="#" class="invisibleLink"></a>
</div>

.wrapWithBackgroundImage {
    background-image: url(...);
}
.invisibleLink {
    display: block;
    left: 55px; top: 55px;
    position: absolute;
    height: 55px width: 55px;
}

Answer 3

Vous ne pouvez pas ajouter de liens à partir de CSS, vous devrez le faire à partir du code HTML explicitement. Par exemple, quelque chose comme ceci :

<a href="whatever.html"><li id="header"></li></a>