Dumb HTML/PHP question

[Phil_Stein]

OK, for my blog, I'd like it to so that if you click on the header image, it takes you back to the home page (i.e. I'd like to make the header image a clickable link).

Here's the relevant line in the header.php file

#header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.gif") no-repeat bottom center; }

(kubrickheader.gif is the header image)

How would I make this a clickable link, to say, www.google.com?

[Alex Handy]

OK, for my blog, I'd like it to so that if you click on the header image, it takes you back to the home page (i.e. I'd like to make the header image a clickable link).

Here's the relevant line in the header.php file

#header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.gif") no-repeat bottom center; }

(kubrickheader.gif is the header image)

How would I make this a clickable link, to say, www.google.com?

I know nothing of PHP, but here's my instinctive guess based on my HTMl knowledge:

#header { background: url("<?php bloginfo('stylesheet_directory'); ?><a href="http://www.google.com>/images/kubrickheader.gif"</a>) no-repeat bottom center; }

[Rob Beschizza]

See below

[Rob Beschizza]

OK. I actually remembered that I can find your site by clicking "WWW."

You can't link to anything from this, it's CSS:

#header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.gif") no-repeat bottom center; }

So, take the image out of the CSS and put it in the actual HTML for the header.

In this case, your CSS line becomes:

#header { background: none;}

And your HTML (taken from your website) becomes:



<div id="header">
<div id="headerimg">
images/kubrickheader.gif (http&#58;//www.google.com)
<div class="description">Phil Steinmeyer’s rumblings on the game biz, programming, and life</div>
</div>
</div>




NOTE: If your pages are generated on the fly by your blog system, you might have to find all this in whatever template system is used. This could be a real bugger.

[chet]

Ignore all the css/php shit you don't need to display a simple image


http&#58;//www.example.com/yourimagepath/image.jpg ('http&#58;//www.example.com')


Make sure to do the border=0 to avoid having the image outlined.

Chet

[Jason McMaster]

Yeah, it's still a basic link.

[Derek Meister]

Yay for Wordpress ... You can also make the entire header area clickable. That's nice if you have multiple images and text inside your header section, but want a click anywhere in that area to take you back to the main page.

What you want to edit is a little bit lower in that same header.php file.



<div id="header">
<div id="headerimg">
<h1><?php bloginfo&#40;'name'&#41;; ?> (<?php echo get_settings&#40;'home'&#41;; ?>)</h1>
<div class="description"><?php bloginfo&#40;'description'&#41;; ?></div>
</div>
</div>

Becomes:


<div id="header" onclick="location.href='http&#58;//www.somewebsite.com/';" style="cursor&#58; pointer;" title="Some Website's Journal">
<div id="headerimg">
<h1><?php bloginfo&#40;'name'&#41;; ?> (<?php echo get_settings&#40;'home'&#41;; ?>)</h1>
<div class="description"><?php bloginfo&#40;'description'&#41;; ?></div>
</div>
</div>

Example: meisterplanet.com (http://meisterplanet.com) (uses a modified Wordpress Kubrick theme as its base)

[Phil_Stein]

Groovy - Derek's example was spot-on. Thanks all.

[Michael Fortson]

Make sure to do the border=0 to avoid having the image outlined.

Chet


Oh man... that brings back memories. /tear

[Igor Muravyev]

#header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.gif") no-repeat bottom center; }

(kubrickheader.gif is the header image)



CSS like that is akin to trying to set your header's background image to the URL given. You can't do links in CSS, so you need to do it in HTML like Derek said.

[pms]

Make sure to do the border=0 to avoid having the image outlined.


img {
border: none
}

never worry again.