Add URL link in CSS Background Image?

Question

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.

Solution 1

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

HTML:

<div class="header">
    <a href="/">
        <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;
}

Solution 2

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

Comments

[Rob van Groenewoud]

This will not work properly, by making the invisibleLink absolute it will be pulled out of the document flow and the div will collapse.

[Simeon]

It does work wonderfully. However, the solution might have to be adjusted to fit the specific needs of this specific case.

[Rob van Groenewoud]

@Simeon: I've tested it in Firefox. It seems to work only if there is enough content to fill the 55px vertical space. I agree that any tailoring would be needed.

[Simeon]

I understand what you mean. Adding overflow: visible; might fix that problem. And I also understand if you don't think this is a complete answer, I could have had a look at the links that was provided. However, this methodology is a way to solve the problem, and if he needs a more specific example, someone or me might find time to provide that.

[Marek Maurizio]

<li> should be direct children of <ul>, with nothing between

[Tech]

display block and position absolute are key in here. And for the height and width you should use 100%