Forums

WordPress › Support » How-To and Troubleshooting

Can you Make a Body Background Image Clickable? (9 posts)

  1. wordpressnoob2009
    Member
    Posted 1 year ago #

    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(http://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.

  2. valuxes
    Member
    Posted 1 year ago #

    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.

  3. cocobongo
    Member
    Posted 1 year ago #

    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

  4. wordpressnoob2009
    Member
    Posted 1 year ago #

    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.

  5. Otto42
    Moderator
    Posted 1 year ago #

    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:
    http://lorelle.wordpress.com/2007/09/28/creating-a-clickable-header-in-your-wordpress-theme/

  6. yoshi
    Member
    Posted 1 year ago #

    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="http://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..

  7. wordpressnoob2009
    Member
    Posted 1 year ago #

    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.

  8. jonknight
    Member
    Posted 2 months ago #

    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 http://gimmee.net Thanks much to yoshi!

    warning - still under construction as of this date

  9. The5sisters
    Member
    Posted 2 months ago #

    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(http://weblocation/BG.jpg
    {<}a target="_blank" href="http://www.your othersite.com">{)}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags