0

I have a html page with a full background image within the body tag, followed by a wrapper: <body> <a href="#" id="bkimage">Background Image</a> <wrapper> .................

Styles:

#bkimage {
position: fixed;
background: url('images/bk.jpg') no-repeat top center;
width: 100%;
height: 1240px;
z-index: -1;
display:block;
overflow:hidden;
text-indent:100%;
white-space:nowrap;
}
#wrapper {
margin: 0 auto;
width: 960px;
background: url('images/transpBlack25.png');

}

The idea is to make the background image clickable. But we need to keep the complete contents of webpage within the #wrapper. body and wrapper tags already have other background images.

This method is not working. I guess it might be because of the wrapper having "margin: 0 auto" property? But am not sure.

Is there a simple workaround for this problem? Please help...

4

1 回答 1

0

The link is not clickable because z-index:-1 sets it behind all the other elements on the page. If something is in the background, and there is something else in front of it, all the clicks directed towards the background element will end up landing on the element directly in front of it. If you're trying to make the entire page act like one giant link, you could enclose everything in the anchor tag.

<style>
#bkimage {
    position: fixed;
    top:0;
    left:0;
    background: url('images/bk.jpg') no-repeat top center;
    width: 100%;
    height: 1240px;
    display:block;
}
#wrapper {
    margin: 0 auto;
    width: 960px;
    background: url('images/transpBlack25.png');
}
</style>

<body>
    <a href="" id="bkimage">
    <div id="wrapper">content</div>
    </a>
</body>
于 2012-07-26T18:24:04.320 回答