Link background image sizing

Hi guys. I have a simple setup


<ul id="menu">
       <li><a href="#">HOME</a></li>
       <li><a href="#">LINK 1</a></li>
       <li><a href="#">LINK 2</a></li>
       <li><a href="#">LINK 3</a></li>
       <li><a href="#">LINK 4</a></li>
</ul>

Now this produces a simple text menu. Now, I have one image which is a funny shape (hence why it is an image), and I am trying to use this image as a background when someone hovers on a link. The text for the links will be different sizes, so the button would need to auto resize. At the moment I have (doing it not on a hover at the moment just so I can test it on all buttons)


#menu li a {
    color: #6D6E71;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 4px;
    text-decoration: none;
    background: url(../images/button.png) 0px 1px no-repeat;
    display:block;
    background-size:auto;
}  

Now this kind of works, the image is the correct width on all of the buttons, but the height of the image is a bit messed up. Really, I was hoping someone could let me know if I am taking the correct approach to this, or if there is a better way?

Thanks

Keep in mid that is you are successful that’s going to produce a very distracting visual effect. Also giving px size is often frowned upon.

Aesthetics and accessibility aside:
background-size:auto; does nothing. get rid of it.
why are you moving the image one pixel down? background: url(…/images/button.png) 0px 1px no-repeat;
vertical sizing is going to be tricky, tho you have your font size set in px (bad!!) your element height will not be 16px+5px +5px=21px because browses add “leading” to text lines. Adding line-height:1 might help, but as UA teat this leading it seems a precarious way to do things. you might be better off by giving the A a specific height:16px; This mean the button can resize horizontally, but not vertically. Everything on the web is a compromise.

At this point I wonder if presentation and pixel perfect accuracy is so important, why include the text in your BG images, make a sprite, and use image replacement instead?

It would also help if you attach the image you are using (or preferably set up a working link so we can see it in action) so we can see if there’s a better way to do what you want:)

Thanks for the feedback. The page I am working on is Here The image is [URL=“http://test.agent42.co.uk/images/button.png”]http://test.agent42.co.uk/images/button.png Another thing I have noticed is if you look at the image, it should be at that angle with the text going across the middle. If you then look at how its placed on my site, you can see that its brought the right side of the image level with the left side, which is a bit strange.

Hi,

For ie9+ you could just use background-size:100% 100% to stretch the image to fit any text.

e.g.


#menu li a {
  background: url("../images/button.png") no-repeat  0 50% / 100% 100%;
  color: #6D6E71;
  display: block;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 4px;
  text-decoration: none;
}

I suggest this:


 #menu {padding:0; margin:0; list-style: none;     
}
 #menu li  {
    display:inline-block;
    vertical-align: bottom; 
    font-family: "arial black";
    position: relative;

}		
#menu a:hover {
    background: url( button.png)  0 0 no-repeat;
}

#menu   a { 
   		 background: url( button.png)  0 2ex no-repeat;

		display: block;
 		text-decoration: none;
    	color: #6D6E71;
    	font-size: 1em;
    	padding: 2ex 8px 5px 8px;
    	text-shadow:0 1px 0 #000;
    	position: relative;
    	z-index: 6;
 }
 #menu li:before{
  position: absolute;
  content:"";
 top:4ex;
 bottom:0;
 left:0;
 right:0;
 background: #f1584e;
 }

rework your PNG to have straight edges might be good too

Hey @nick2price;
We’re currently testing a new product that we’ve built at SitePoint - it’s called Codefix and our experts help you to fix your CSS problems in real time.
If you’d like to get this problem fixed on the spot, head on over to http://codefix.sitepoint.com/