开发者

Linking a Background Image

I am trying to link my background image using the tutorial over at http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/#comment-28009 but it's just not working for me.

I think I have the css right, but when I insert the html to make the link, it sets my WHOLE site as one giant link. Is there a way to make the link layer behind my content so it is only clickable on the s开发者_运维知识库ides of the container?

I've tried using this css:

body {
    background-image: url('images/bg.png'); 
    background-position: center top;
    background-attachment: fixed;
    }

body #background-link {
position: absolute;
height:11000px;
text-indent:-9999px;
width:1440px;
top: 0; left: 0;
border: 0;
float: left;
}

and this html:

<a href="http://url.com" title="Title" id="background-link">the link</a>


You need to set the z-index of the container of the site so that it is higher than the anchor link. The simple way to do this -

Add this CSS:

#wrapper{position:relative;z-index:10;}
#background-link{z-index:1}

This is the HTML:

<a href="http://url.com" title="Title" id="background-link">the link</a>
<div id="wrapper">
    all of your site code goes here
</div>


The position:absolute makes you're link stay in front. You can probably try z-index, but is easier to tell if i can see you're entire code? Or page-link?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜