How to make a clickable background in WordPress?

It’s easy, you need to understand the concept.

First of all, go to your css file and edit the body tag. Be sure to have a backup for your wordpress theme.

1
2
3
4
5
6
7
8
9

body{
	background-color:#fff;
	font-family: Arial;
	background-image:url(img/back_banner.jpg); 
        background-repeat:repeat;
	background-attachment:fixed;
	cursor:pointer;
	width:100%;
}

This body css values will make your image background static when you scroll.

Go to single.php from your wordpress theme and add this jQuery code: (should be below the header, just when your image background is usually showing up)

2
3
4
5
6
7
8

<script>
$('body').click(function(e){
    if (e.target === this) {
        window.location = "http://google.com"
    }
});
</script>

This will make all your page clickable. The thing is, you want your content to be normal, just the background to be clickable.

You can easily do that by adding:

3

cursor: auto;

to the div that is responsable with your content area, like all the main area where your articles are showing up.
“cursor:auto”; will overwrite “cursor:pointer;” from the raw body css tag.