Add URL link in CSS Background Image?

I have a CSS entry that looks like this:

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

How can I add the link to the the background image in that CSS?

The full CSS can be found here and the html that uses is there.

3 Answers

Try wrapping the spans in an anchor tag and apply the background image to that.

HTML:

<div> <a href="/"> <span>My gray sea design</span><br /> <span>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;
}

Using only CSS it is not possible at all to add links :) It is not possible to link a background-image, nor a part of it, using HTML/CSS. However, it can be staged using this method:

<div> <a href="#"></a>
</div>
.wrapWithBackgroundImage { background-image: url(...);
}
.invisibleLink { display: block; left: 55px; top: 55px; position: absolute; height: 55px width: 55px;
}

You can not add links from CSS, you will have to do so from the HTML code explicitly. For example, something like this:

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