Friday, 16 May 2014

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

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

2 comments:

  1. A good example on Background image and css, but could be better with live example online.

    Thanks
    RiGSEO
    Google SEO price

    ReplyDelete
  2. Want to learn web designing online? Just follow this link for HTML5 CSS3 Web designing online live tutorial classes . The Live tutors will teach you web designing topics, which you will be able to learn sitting at your home.

    ReplyDelete