Can you Make a Body Background Image Clickable?

  • So I’ve been wondering how to do this for ages now, but I haven’t got a clue. I’ve tried asking people on web design forums, but they don’t seem to know how, either. I got to thinking that maybe people who work with WordPress, as this is a WordPress Stylesheet thing, would know more than your average web designer.

    So, here’s what the code for my WordPress site’s body looks like in the stylesheet:

    body {
	font-size: 9pt;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #000;
        background: #000000 url(https://www.IMAGELOCATION.jpg) no-repeat center top;
	text-align: left;
	margin: 0;
	padding: 15px 0;
	line-height: 1.5em;
	}

    What I want to do is make the IMAGELOCATION image clickable. Is there a string of code to add to the above to achieve this?

    Thanks for any thoughts.

Viewing 8 replies - 1 through 8 (of 8 total)

  • I may be wrong but I don’t think you can click a background. But you can do is create transparent clickable areas so it looks like you’re clicking the background.

    exactly. the only way to do that (AFAIK) is adding a 100% width and height with an invisible png or gif (you can make it huge). Can’t think of any valid or straightforward reason you may want to do that, though, but there you have

    Thread Starter wordpressnoob2009

    (@wordpressnoob2009)

    Basically I want to promote some of my other sites, and I thought the best way to get them “in front” of the visitor is literally to put them in front of the visitor via the bg. I know I can do it other ways, like with banner ads, links, etc, but I thought this would increase click-through ratio.

    Anyways, I’m a coding noob, so can anyone suggest how I can do what cocobongo is suggesting? What would the code look like, and where would I put it, somewhere in the header php I would guess?

    Thanks.

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    The general idea to making a space clickable is to have a link and then expand it in size to cover that space. I’m not sure this would work with a body background, but it does with a header DIV, to pick an example.

    Read this for ideas:
    https://lorelle.wordpress.com/2007/09/28/creating-a-clickable-header-in-your-wordpress-theme/

    This is the same idea to Otto’s example – having dummy link covering entire space. I added a few styling to make the main content overlay the link.

    #only tested with FF.

    body part in html:

    <body>
<a href="https://example.com" id="bglink">jump to example.com</a>
<div id="page">
  page contents here
</div>
</body>

    and the stylesheet:

    #bglink{
  display:block;
  height:100%;
  width:100%;
  position:fixed;
  left:0;
  top:0;
  z-index:0;
  text-indent:-5000em;
  /* If you want to make only a part of background clickable,
     adjust height/width/left/top here. */
}

#page {
  position:relative;
  z-index:10;
}

    Personally, I would be very annoyed if I clicked the background without knowing that I’d be sent to somewhere else..

    Thread Starter wordpressnoob2009

    (@wordpressnoob2009)

    I would too! It’ll be an ad, like, “Click here for this site” something like that, very obvious what they’re getting when they click. Since I have a couple of sites that are in the same area, I think a visitor who visits Site A might be interested in Site B. Thanks for this! I’ll give it a shot and report back.

    But for someone like me it’s a great thing to have learned! I had an image as part of the background, upper left corner, and wanted it clickable without moving the image out of the background/stylesheet. The reason is obvious at the site: Clicking either the blog or the testing links takes you to different subdomains. I wanted the background image to link back to the original www site while at the same time using the subdomains’ local “Home” button to take you to the front page of the subdomain. Doing it this way allows me to tie the sites together visually using a common background while still allowing customization on each subdomain.

    A slight mod of the code above worked out great. Check it out at https://gimmee.net Thanks much to yoshi!

    warning – still under construction as of this date

    Your original background can have a transparent “layer” of a one pixel jpg
    with the same attributes as the backgound and the new background=
    url(https://weblocation/BG.jpg
    {<}a target=”_blank” href=”https://www.your othersite.com”>{)}

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Can you Make a Body Background Image Clickable?’ is closed to new replies.