Trying to get an image to show up behind text in a button

Hello all,

I'm trying to get an image to show up behind text in my main nav menu. The links are text, and on hover, the links change color and I would like to have an image show up behing the text as a background image. The trouble is, only part of the image is showing up on hover. I've tried everything I know, which admittedly isn't much. I have been trying to search out this answer, but I don't think I'm using the correct search parameters because I keep coming with sites showing images using all images, which isn't exactly what I want. Any help would be greatly appreciated.

Here's how I would like the hovers to work:
http://www.sustsolutions.com/helpImages/correct.png

Here's what's happening:
http://www.sustsolutions.com/helpImages/incorrect.png


Here's my code thus far:

* {margin: 0; padding: 0:}

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */

body {background:url(images/sustBG.jpg); background-repeat:repeat-x; background-color:#660000; font: 14px/1.4 Arial sans-serif; color:#660000}


#wrapper {width: 1044px; margin: 0 auto;}

#mainContent {position:relative; width: 1044px; margin-top:25px; background:#fff;}

#header {position:relative; padding:20px 20px;}

#logo {width:300px; float:left;}

#logo p {margin-left:-9999px;}

#mainNav {width:700px; margin-top:40px; float:right;}

#mainNav ul {margin-right:3px; margin-bottom:2px; list-style:none; font-size:1.3em;}

#mainNav li {display:inline-block; width:101px; height:42px; text-align:center; }

#mainNav li a {color: #660000; text-decoration:none; width:101px; height:42px;}
#mainNav li a:hover {color: #cc3333; text-decoration:none; width:101px; height:42px; background-image: url(images/nav-button.png);}

#mainNav li a:hover {color: #cc3333; text-decoration:none; width:101px; height:42px; background-image: url(images/nav-button.png); background-position: center center;background-repeat: no-repeat;}

this might do it.

Thanks for your help, but the problem still exists. What's happening is that the image is "appearing" in the bounding box around the text to which the link is attached. That's why I cannot see the entire image. Not sure even how to ask what I need to try.

I'm unsure of the precise explanation but the 'a' tags are inline elements and ignore the height and width settings.

Try removing the height and width from the li tags' css, and adding these settings to the a tags:
#mainNav li a {
width: 101px; height: 42px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
The alignment options are need to push the links to the centre of the cells.
(The li tags don't need the height/width - they will stretch to accommodate the a's.)

Added: Actually, inline elements always ignore the height and width (of course!) so their display property needs to be changed - or they could be floated (or play with line-height (ugh)). Andy.

I would have thought simply adding padding to the appropriate element would increase its width and/or height to allow all the image to appear.

That did it. Thank you! I am unfamiliar with the display: table-cell;, but that did. Thanks again.

I would have thought simply adding padding to the appropriate element would increase its width and/or height to allow all the image to appear.
That occurred to me but the element's box needs to be the size of the background image, so padding alone won't get there (without changing the display property).

That did it. Thank you! I am unfamiliar with the display: table-cell;, but that did. Thanks again.

be careful using styles like table-cell if browser compatibility is an issue because not all browser versions support it.

If you want to guarantee browser compatibility, then you will have to use other styles.

That occurred to me but the element's box needs to be the size of the background image, so padding alone won't get there (without changing the display property).

To be honest, I only had a quick look at the op's problem. If all the images are the same width then I would have thought either setting an element width to the width of the image or adding padding where required would allow all the image to be displayed. Maybe it wouldn't work in this situation.

But in either case, adding padding or whatever could get messy if image sizes change or vary.

Normally in a situation like this, I would use sliced images which create the illusion of a menu button expanding/contracting as the text within the button changes dynamically or however.

That did it. Thank you! I am unfamiliar with the display: table-cell;, but that did. Thanks again.

No probs. 'display: table-cell;' means that it behaves similar to a table-cell. So it's inline but does obey the height and width settings (unlike a standard 'a' tag), and enables us to also use 'vertical-align:center;' - which is nice :thumbsup:

To be honest, I only had a quick look at the op's problem. If all the images are the same width then I would have thought either setting an element width to the width of the image or adding padding where required would allow all the image to be displayed. Maybe it wouldn't work in this situation.

But in either case, adding padding or whatever could get messy if image sizes change or vary.

Normally in a situation like this, I would use sliced images which create the illusion of a menu button expanding/contracting as the text within the button changes dynamically or however.
I assumed the op was looking to keep the buttons the same size, and just use short link text so that they all fit within the buttons.

Setting the height/width of the containing li elements had no influence, because of the default inline behaviour of the 'a' elements. I suppose we could set the image as a background for the li elements (?) but then we still have the issue of centre-ing the links.

I can't quite see how padding would assist? Regards, Andy.

Padding can increase the width and height of inline elements but I would need to see the op's html as well and not just the css to see exactly what is going on.