CODEWITHSUNDEEP
htmlcssbackgroundanchorbackground-image
crmpicco
crmpicco

Reputation: 17181

apply anchor to background image in CSS

If I have a DIV of height 200px with a background applied to it of height 175px, is there a way that I can wrap an anchor around the image only ?

<div style="background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
    <ul class="elem"></ul>
    <span class="left_border"></span>       
</div>

Nothing is jumping out at me other than restructuring my markup, which i'd rather avoid doing at this stage.

Upvotes: 0

Views: 15492

Answers (4)

Jai
Jai

Reputation: 74738

You can do these:

<div style="position:relative; background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
   <ul class="elem"></ul>
   <span class="left_border"></span>
   <a href='#'>link</a>       
</div>

css for link <a>:

.block a{
    display:block;
    width:100%;
    height:25px; // spared height: from the top;
    overflow:hidden;
    text-indent:-99999px;
    position:absolute;
    left:0;
    bottom:0; // or you can try with top:175px;
}

Upvotes: 0

DannyTheDev
DannyTheDev

Reputation: 4173

if you give the parent div (the one with the background) some css: position:relative

you can then create an anchor like so:

.block2 a.block_link {
    position:absolute;
    bottom:0;
    height:175px;
    left:0px;
    width:100%;
    z-index:1;
    background-image:url(transparent.png);
    text-indent:-9999px;
}

Please note: apply a transparent png to the link to fix the IE bug.. just a 1px by 1px transparent image will be fine..

<div style="background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
    <ul class="elem"></ul>
    <span class="left_border"></span>    
    <a href="#" class="block_link">&nbsp;</a>   
</div>

To keep the other elements above the link, i.e the ul and span.. add the css of

.block2 ul,.block2 span {
    position:relative;
    z-index:2;
}

Upvotes: 5

alexp
alexp

Reputation: 3637

As the comments say, you can't technically put a link around a background image, but I assume you just want to make that area clickable maybe?

HTML:

<div id="my-div" style="background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
    <ul class="elem"></ul>
    <span class="left_border"></span>      
    <a href="http://www.example.com/"></a> 
</div>

CSS:

#my-div {
position: relative;
}
#my-div a {
display: block;
position: absolute;
top: 0;
left: 0;
height: 175px;
width: 100%;
}

It's not clear from your question how you want the link to work in conjunction with the UL, but you'd either have to position the list below the link area or with a higher z-index if it needs to be clickable.

Upvotes: 0

keeg
keeg

Reputation: 3978

You can put a div in, position it absolutely over top of your background image and set the width and the height to the dimensions of the background image, then wrap an anchor link around that div.

Upvotes: 0

Related Questions