clickable css image

[oddvar]

Hi, I want to have a click able image in my web, that link to my homepage.
Ref: http://www.w3schools.com/Css/tryit.asp?filename=trycss_background-
attachment and a click here should transfer to my homepage (index.html)

I dont easily find a working example, and my knowledge of css is very low.

Please help me.

Oddvar

[labmonkey111]

Are you saying you want the background image to be clickable? Because as far I know that is not possible (at least not without some JavaScript). If all you want is an image that is a link, try:

<a href="your url here"><img src="your image path here"></a>
 

[David Laakso]

A background image can't have a behavioral property with CSS. But there is a "trick" you /may/ be able to employ: apply the background image to the link. Please see: CSS Trick

[JamieHowarth0]

I've used that trick many a time.

For the benefit of the OP (and anyone else who might find it useful) you can set a background image on a section of text (normally a heading) and then add a link to it.

Let's say you have the following HTML code:

<a href="homepage.html"><img src="images/yourlogo.gif" alt="Your Company Name" /></a>
 

Now, we all know that search engines prefers images over text, right? So we'd rather have a nice big <h1> in there with our company name so search engines find the text, but we still want to show off our fancy company logo that we spent thousands of dollars on a bunch of clever marketing and design guys to come up with.

<h1 class="logo"><a href="homepage.html">Your Company Name</a></h1>
 

So how do we get the logo in there in an invisible manner?

<style type="text/css">
<!--
h1.logo {background:url("images/yourlogo.gif") no-repeat top right;}
a {display:block; height:150px; width:300px; text-indent:-9999px;}
--></style>
 

What we've done is put the background image on the h1 tag, and set the link to be a block-level element. This means we can control it's height and width a bit better than an inline element.

So when you view your page with no CSS (as search engines do), they'll see a nice, big, H1 tag - great for getting the PageRank up for your company name. But when users with modern browsers view it, they'll get the eye-catching benefit of that oh-so-expensive logo.

codegecko