Changing repeating background image on hover

Get Started
1

I have a page with a 3 column layout - fluid, fixed, fluid.

The two outer divs which are fluid have a repeating image background. I want this repeating image to change on hover and am finding it is not as easy as I thought.

HTML

 <div id="leftcoltop"><a href="#nogo">&nbsp;</a></div>

CSS

#leftcoltop a{background: url(images/background1smoky.jpg) repeat-x top right; width: 100%; height: 100%}
#leftcoltop a:hover{background: url(images/background1.jpg) repeat-x top right; width: 100%; height: 100%}

Can anyone tell me where I am going wrong?

Thanks

2

Why not try something like this?

<div id="box"> 
    <div id="leftcoltop"></div>
</div>

#box { width: 100%; height: 200px; }

#leftcoltop { background: #a1a1a1 url(images/background1smoky.jpg) repeat-x top right; width: 100%; height: 100%; }
#leftcoltop:hover { background: #ccc url(images/background1.jpg) repeat-x top right; width: 100%; height: 100%; }

#box is simply there to define the edges of the area you want the #leftcoltop div to fill. And the background colors are there because I don’t have access to your images. Feel free to remove!

3

whoohoo! That solved it! I have been staring at this for ages with no luck and now it works. Thanks for posting.

4

No problem. Glad it worked out for you!

Merry Christmas btw! :slight_smile:

5