Image behind the link

Question

So I have a menu and on it there is a button with text and I want behind the text to be an image that shows that you are on the page and this is the code:

HTML:

<div id="menu">
    <div id="about"><a href="#">About Us</a></div>
</div>

CSS:

a {
    text-decoration:none;
    color: white;
    background: url(images/hover.png);
    width: 100%;
    height: 38px;
}

#about {
    background: url(images/button.png);
    width: 168px;
    height: 51px;
    font-family: Anivers;
    font-size: 20pt;
    text-align: center;
    color: white;
    line-height: 50px;
    vertical-align: middle;
    margin-top: 1%;
}

So far, so good, except that the image will only show the height and width that coresponds to the size of the text. For instance if I make the text 24pt, the image behind it will grow larger, but if I make it smaller, the image will become smaller and I don't want that. So how do I stop it from happening. I already searched all over the place, sadly I couldn't find similar topic. I hope you can help me :).

Answer 1

---

If I understand your question correctly you need to add display: block to the <a> element and set height: auto; instead. As for the image it should not scale anymore and I centered an image for demo purposes.

DEMO

Answer 2

You can accomplish this by displaying your "a" element as a "block". This will allow you to specify the size of the element independent from the size of the font. You can then inherit the width and height of the "#about" css styling if that's the size of "hover.png", or specify your own size based on the actual size of "hover.png" if its different than that stated in "#about", it sounds like 38px for hover.png is what you want as opposed to the 51px height of the #about parent. Without setting "a" as a block, the font size of the text in "#about", the parent element, would rule the overall size of the a element and styling, and your background "images/hover.png" will only provide a background for that size.

Here's what your a element in css would look like with the 38px height, you could also say "inherit" for the height if desired. I tested this and it works:

a {
text-decoration:none;
color: white;
background: url(images/hover.png);
display: block;
width: inherit;
height: 38px;
}

I hope this helps.

Answer 3

<div id="menu">
    <img src="images/4.png" />      
    <a href="#">About Us</a>
</div>

#menu  {
    position: relative;
    width: 168px;
    height: 51px;
}
img  {
    width: 100%;
    height: auto;
}
img:hover  {
    background: blue;
}
a  {
    position: absolute;
    z-index: 100;
/*  top: 0;   PLACE LINK CORRESPOMNDING TO IMG 
    left: 0;  PLACE LINK CORRESPOMNDING TO IMG  */
    background: red;

    font-family: Anivers;
    font-size: 23pt;
    color: white;
    line-height: 1.2;
}