Home/ Questions/Q 8287949
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T12:10:32+00:00

I have a html page with a full background image within the body tag,

  • 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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0