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?
精彩评论