How can I "contain" a background image?

Question

I'm using a background image via CSS to style a few elements on my site. The problem I'm seeing in both Chrome and IE is that when the line-height of the line is smaller than the image is tall, the image gets cropped. Here's a fiddle that demonstrates the issue (again, view this with Chrome or IE to see the problem; Firefox renders things as I'd like), and here's the corresponding code from said fiddle:

HTML

<ul>
    <li class="icon"><a href="#">Link 1</a></li>
    <li class="icon"><a href="#">Link 2</a></li>
    <li class="icon">No Link Here</li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    display: inline;
    font-size: 13px;
    margin: 0 1em 0 0;
    padding: 0;
}

ul li.icon {
    background: url(http://www.borngeek.com/images/2013/stack_overflow_ex_01.gif) no-repeat left center;
    padding-left: 22px;
}

Note that in reality I don't hard-code the font-size in pixels; they just end up being rendered at 13 pixels high. I've hard-coded the value here to reproduce the problem.

None of the following seem to work:

Setting height, line-height, or min-height on the various elements (even parent elements)
Using the overflow value in various ways

Potential, problematic workarounds include:

Changing the font size to something larger
Using a nebulous padding value to prevent the image from being clipped
Using display: inline-block, which has its own set of issues
Using float: left, which also has some nits
Using the <img> element instead of CSS, which feels wrong in this case
Using the background-size CSS property I found in this answer, though support for this is spotty

Is there a cleaner way of handling this, or is one of the above workarounds my best bet? My only goal is for the parent element to be tall enough to render the entire 16x16 image.

The fiddle show fine to me with chrome. – Shikiryu Apr 01 '13 at 20:47 — Shikiryu, Apr 01 '13 at 20:47

Michael · Accepted Answer · 2013-04-01T20:55:54.290

3

Force the LI's to have 2px of padding on the top and bottom (or just 3px to the top). The point of this is to make the height of the <li> equal or be greater than the height of the image, which is 16px. Your font size is 13px, so 3px padding to the top = 16px, or 2px to top and bottom = 17px which also works. This is the best way as it is sort of "best-practice".

http://jsfiddle.net/xkFfs/3/

padding: 2px 0;

OR, adjust the background-position:

http://jsfiddle.net/xkFfs/6/

background-position: 2px 0px;

edited Apr 01 '13 at 20:55

answered Apr 01 '13 at 20:45

Michael

7,016
2
28
41

Thanks for the background-position bit. I'll probably end up using that. – Jonah Bishop Apr 01 '13 at 21:01
Modifying the padding is also doable; it just feels wrong to arbitrarily pull a number out of the air. But it is what it is. Interestingly, I don't see this issue on my system at home; it only seems to show up on my laptop. Not sure why that is... – Jonah Bishop Apr 02 '13 at 13:38
It's not pulling a number out of the air, there is math involved that makes it work. The issue is that your image is 16px high but your LI is no, the LI is only 13px tall as derived by your 13px font. Give padding-top of 3px, and 13+3=16px. Generally speaking links like this are made to be a specific height in the first place, which is best-practice, it prevents style differences between browsers and systems. Which is probably why your desktop see's it fine and your laptop doesnt. – Michael Apr 02 '13 at 13:55
Well, my real situation is complicated by the fact that I use variable font and container sizes (I'm migrating my site to a responsive design format). So the padding amount I'd need, at some level, feels nebulous to me. I guess I need to read some more about it. – Jonah Bishop Apr 02 '13 at 13:57
Generally speaking do those font sizes change between individual area's of the site or just between mobile/tablet/desktop? If they only change on your media-queries, then just adjust the padding per media-query to compensate. So for example, if at mobile size the padding should be 5px to accommodate a larger text and button size, then set the padding to 5px for mobile and 3px for desktop etc.?????? – Michael Apr 02 '13 at 14:05
It's primarily between various areas of the site. I haven't had font size issues on mobile devices (at least so far). I'll definitely keep those values in mind in my media queries. Thanks again! – Jonah Bishop Apr 02 '13 at 14:40

How can I "contain" a background image?

1 Answers1