CODEWITHSUNDEEP
htmlcsshyperlinkbackground-image
Millhorn
Millhorn

Reputation: 3176

Adding dynamic links to multiple background images...

Check out the Fiddle here.

As you can see, I have two small background images in the same <div>.

I'd like to be able to link each one to the appropriate link on the web. Not quite sure how to do this one...

CSS for this div...

.iso-container li   {
    background: #f8981d;
    background-image: url(http://webfro.gs/south/kb2/images/pdf-button.png), url(http://webfro.gs/south/kb2/images/bxw_email.png);
    background-position: 75% 90%, 25% 90%;
    background-repeat: no-repeat;
    padding-left: 10px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    font-size: .9em;
}

Upvotes: 0

Views: 602

Answers (1)

CodeGodie
CodeGodie

Reputation: 12142

I would try to do something like this: 

 <style>
.iso-container li   {
    width: 140px;
    height: 140px;
    margin: 5px;
    position: relative;
    background: #f8981d;
    font-size: 0.01em;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    font-size: .9em;
    -webkit-border-top-right-radius: 1.2em;
    -webkit-border-bottom-left-radius: 1.2em;
    -webkit-border-top-left-radius: 1.2em;
    -webkit-border-bottom-right-radius: 1.2em;
    -moz-border-radius-topright: 1.2em;
    -moz-border-radius-topleft: 1.2em;
    -moz-border-radius-bottomright: 1.2em;
    -moz-border-radius-bottomleft: 1.2em;
    border-top-right-radius: 1.2em;
    border-top-left-radius: 1.2em;
    border-bottom-right-radius: 1.2em;
    border-bottom-left-radius: 1.2em;
    border-radius: 1.2em;
    behavior: url(pie/PIE.htc);
}

.iso-container li a{
    width: 20px;
    padding: 10px;

}

</style>

<ul class="iso-container clearfix">
  <li class="item" id="_1">
    <h3 class="doc title">2013-2014 Verification Worksheet <br />(Dependent)</h3>
    <a href="your link">
        <img src="http://webfro.gs/south/kb2/images/pdf-button.png" />
    </a>
    <a href="your link">
        <img src="http://webfro.gs/south/kb2/images/bxw_email.png" />
    </a>
  </li>
</ul>

Upvotes: 1

Related Questions