Home/ Questions/Q 7713321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T01:50:48+00:00

This is something that I have had trouble with in the past and it’s

  • 0

This is something that I have had trouble with in the past and it’s on my mind so I made a simple example sprite image to test and hopefully get some answers with.

If you view my code and demo here
http://dabblet.com/gist/2263037

You will see that I have a simple div that uses a background image

Below that DIV I have the same div but this time I attempt to use a CSS Sprite image instead

So my question, is it possible to replicate the look of the first DIV using this sprite image or are changes needed on the sprite image?

Without Sprite image 

/* Notice wrapper with Single Image */
.notice-wrap {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #B81900 url(http://www.getklok.com/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
}

With Sprite image 

/* Notice wrapper with SPRITE Image */
.notice-wrap-sprite {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite.png) repeat;
    background-position: 0 -52px;
}

HTML 

<div class="notice-wrap"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>

<BR><BR><BR>

<div class="notice-wrap-sprite"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Setting up the sprite

    You can use an image sprite to do what you want. They can only repeat along one axis, i.e. repeat-x, but in your case that’s all you need. Also your image within the sprite must run the entire width, this is how the browser knows to tile it.

    The trick is your repeated background must extend across the FULL WIDTH of your sprite image. This is crucial. Here is your image, modified to meet that criterion:

    enter image description here

    Setting up the CSS

    Now we just reference it as usual, and it will work fine:

    /* Notice wrapper with SPRITE Image */
.notice-wrap-sprite {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite3.png) repeat-x;
    background-position: 0 -52px;
}
    • 0