Please Help CSS Backround Image problem

[digiyes]

Hi

If you could help would be great

On a homepage we want to add H2 on top of a clickable backround image. Whats the best way to do this in CSS there is the following

#home_content {
width: 169px;
height: 56px;
padding: 85px 0 0 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url(images/new/home_content1.jpg);
background-repeat: no-repeat;
color:#000066;
font-weight:bold;
font-size:18px;
float: left;

And on the homepage the following
<div id="home_content" onclick="location.href='/url.asp';" style="cursor: pointer;">
<div align="center"><h2>Mobile phone<br />
accessories</h2></div>

It works but we want to scrap the onclick?

Any advise from styling experts

[rocknbil]

Welcome aboard digiyes, that would work but it's the hard way. Apply the BG to the h itself, better yet, the a - then you can use an image with a different state for mouseover. Something like this (will need testing: )

<h2 id="home_content"><a href="/url.asp">Mobile Phone Accessories</a></h2>

#home_content, #home_content a {
width: 169px;
height: 56px;
display: block;
text-decoration:none;
font-weight:bold;
font-size:18px;

}

#home_content {
padding:0;
margin: 85px 0 0 0;
float: left; /* only float if you need to, text is left aligned naturally */
}

#home_content a {
font-family: Arial, Helvetica, sans-serif;
background: url(images/new/home_content1.jpg) top left no-repeat;
color:#000066;
}

#home_content a:hover {
background-position:bottom left;
color #ff0000;
}

So you just double the height of home_content1.jpg and paste a copy of it below, alter the lower half for your mouseover state.

normal state
------------
mouseoverstate

The actual image is 112px high, only 56px of it shows at a time.