Question

In HTML (with CSS), I use the following code to create a list of links that have background images (or rather: images on the left of the links):

HTML:

<ul>
    <li><a class="share_fb" href="#">Like on Facebook</a></li>
    <li><a class="share_tw" href="#">Share on Twitter</a></li>
    <li><a class="share_gp" href="#">+1 on Google Plus</a></li>
</ul>

CSS:

a {
    font-size: 1.4em;
}
a.share_fb {
    background: transparent url(images/share_fb.png) scroll no-repeat left center;
    padding: 0.1em 0 0.1em 0.4em;
}
...

The problem is: I do my best to make the whole page scalable. But when it comes to the background graphics: How should one do this? Which size is the best for these background images? They may not be larger than the text line but should scale when the text does.

Answer 1

Try adding:

background-size: contain;

to your a.share_fb class. This should make the background image scale to the full height of the element (not the width because of the text).