WebTurd - Web Dumps Served Hot n' Fresh

After searching around for awhile, I couldn’t come by any code that I could use to create a clickable background image on a client’s website.  What is a clickable background ad? Its really just a huge background image that sits behind all of your content that can be clicked. A good example is to check out any big gamer website or adcamo.com also has some good ones to show for examples.

Sounds easy right? I struggled with this for quite some time and finally figured it out!  I even got it to work on a wordpress theme.  The trick is using “position” and “z-index” mentions in your css area.

Anyway, your search is over if you are digging around for something that will work…it works, trust me. Who knows, maybe someday I will turn this into a clickable background image wordpress plugin.

Its free to use.  I just would appreciate some credit or let me know where you use it. Here’s the code:

CSS CODE
[code]
body
{
overflow: hidden;
}
.bglink
{
position: absolute;
z-index: -1;
top: 0px;
left: 0;
width: 100%;
height: 100%;
background: #fff url('http://www.psdgraphics.com/file/green-abstract-background.jpg') center center no-repeat;}
.content
{
position:absolute;
padding: 5px;
background-color:#fff;
color: #000;
width: 960px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
[/code]

HTML CODE
[code]
<div><a href="http://www.google.com"></a></div><div>Webturd Content Will Goes Here<br>Test Content Webturd Goes Here<br>Test Content <a href="http://www.webturd.com">Webturd</a> Here<br>Test Brow Will Goes Here<br>Test Content <a href="http://www.test.com">Will</a> Goes Here<br>Test <a href="http://www.webturd.com">links work within the overlaying div</a>!<br>Test Content Will Goes Here<br></div>
[/code]