how to fit the background image to the containing anchor element?

Question

Hi, I'm trying to design a link with an image background, question is if the image is too large, how do i fit it to the width and height of the anchor using css?

<a href="#"></a>
<style>
 a
 {  
    display: block;
    padding: 5px 12px;
    border: 1px solid black;
    width: 10px;
    height: 10px;
    background-image: url('/Scripts/images/downarrow_blue.png');
    }
</style>

tia, Lina

Answer 1

Background images in CSS 2.1 cannot be resized, although CSS 3 supports the background-size property it's not widely implemented.

background-size: 10px 10px;

The obvious alternative is to just use an <img> tag:

<a href="#"><img src="mybg.png" alt="" style="width:10px; height:10px" /></a>    

But you probably have a reason for not doing it that way anyway, right?

Other alternatives might be

• Resize the <a> element to the size of the image instead.
• Resize the image locally and upload it under a different filename.
• Use a server-side preprocessor such as PHP or ASP to deliver the image in the size you want.