Home/ Questions/Q 8494563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T23:20:02+00:00

I’m trying to lay out a page with an image sprite which holds awards

  • 0

I’m trying to lay out a page with an image sprite which holds “awards” (gold, silver, bronze). It’s actually WORKING, save for the print preview in Chrome. In Firefox/IE it looks just fine but what Chrome is doing, is that the background image starts off correctly (i.e., the background-position works) but the rest of the image stretches to the start of the next element. See this url for screenshots.

Here is a snippet of the HTML and related CSS:

<span class="price">$22.15
    <br />
    <span class="awards-section">
    <span class="award gold">S.O.E.I.W.F</span>
    <span class="award silver">F.L.I.W.C</span>
    <span class="award silver">A.C.W.C</span>
    <span class="award bronze">F.L.I.W.C</span>
    <br />
    </span>
</span>

.awards-section {
    margin-top: -0.3em;
    display: block;
    font-size: 4mm;
    font-weight: normal;
}
.award {
    background-image: url('/images/general/awards.png');
    width: 60px;
    height: 25px;
    display: inline-block;
    padding-left: 62px;
    margin: 1px;
    background-repeat: no-repeat;
    line-height: 25px;
    float: left;
    clear: both;
}
.gold { background-position: 0 0; }
.silver { background-position: 0 -25px; }
.bronze { background-position: 0 -50px; }
.double-gold { background-position: 0 -75px; }
.double-silver { background-position: 0 -100px; }
.double-bronze { background-position: 0 -125px; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve ran into this problem as well. Only workaround I’ve found is to switch to use an img tag cropper method as opposed to the background-image method.

    Method is shown here http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

    I have no idea what chrome is doing, but I think it’s grabbing the background-image dimensions and displaying them at that size, but cropping the image using the div dimensions. Which is really odd if I’m right.

    • 0