Sprite Height Limitation for CSS Images

Are there limits to how tall/wide CSS Sprite-maps can be?

Sometimes it's more of a matter of download time. Since browsers can use multiple connections to download files, a huge image can take longer to download than a few smaller ones.

If your image is so big that it's slowing down page load maybe it's time to consider several smaller sprite images.

Direct-X 9 has a size limit if 4096 pixels, so any Internet Explorer filters applied to these elements will crop them at 4096 pixels.

See: IE display transparency bug on height > 4096px?

CSS Sprite Doesn't Work Because Width/Height defines container

If I understand your question correctly, and your constraints, this problem may be solvable using pseudo elements.

One approach might be to slightly modify the styles for the existing CSS as below, and add a floating icon via a pseudo element.

This should give you the control you need to size, and select unique icons from your icon sprint/atlas:

[UPDATED] Sorry, just noticed my original answer was missing: content:'' in the pseudo selector - please ensure this is added

/* Leave existing styling for box sizing mostly untouched, with minor adjustments */
.simply-scroll-btn-down {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 25px;
    background: #000; // Remove image, etc
    position:relative; // Add this so that pseudo element can be centered
}

/* Display a pseudo element for icon */
.simply-scroll-btn-down:after {

    //[UPDATE] This is required
    content:'';

    position:absolute;
    display:block;

    // This translates the pseduo element for centering
    left: 50%;
    top: 50%;

    // This adjusts the pseduo element for centering based on pseduo elements dimensions
    margin-left:-20px;
    margin-top:-20px;
    width: 40px;
    height: 40px;

    // Adjust these rules to suit the icon coordinates in your sprite/atlas 
    background-image: url('YOUR_SPRITE_URL');  // Customise as needed
    background-repeat:  no-repeat; // Customise as needed
    background-position: 10px 10px; // Customise as needed
}

css sprite as background, limited portion?

Set the width and height of the element to 48px.

.element{
    width: 48px;
    height: 48px;
}

Set the background of the element to your image

.element{
    background-image: url('image.png');
}

Move the background so that the top left corner of the icon is positioned correctly.

.element{
    background-position: 20px 94px;
}

The two numbers in background-position are the X and Y coordinates (respectively) where the top left corner of your 48px by 48px is in your sprite image. So maybe it's actually 96px 0px or something.

EDIT

If you can't control the width and height of the element you are trying to put the background in, but you can add new DOM elements, you can try adding a span inside the element you really want to put the image as a background for.

It would look something like:

<div id="noControl">
    <span id="justCreated">
    </span>
</div>

and the CSS would look exactly the same as above, except you would need to treat the inline span as a block element:

#justCreated{
    display: inline-block;
}

EDIT 2

If you have control over new DOM elements, and want to make your sprite the background without messing with a span, just add another div inside your original one.

Would wind up looking like:

<div id="noControl">
    <div id="justCreated">
        ALL of the content that used to be inside #noControl
    </div>
</div>

and the CSS for it would be

#justCreated{
    width: 48px;
    height: 48px;
    background-image: url('image.png');
    background-position: 96px 0px;

    z-index: -200;
    /* z-index of all the contents needs to be not set, or set to larger than -200 */
}

This is all theoretical, but it SHOULD work.

This way, you can apply the sprite sizing to a block element without messing with the inline stuff. This may affect CSS if it addresses elements by child status (like #noControl > a), because you are inserting a div between the parent and the child.

I am still researching whether you can do this at all if you have no control over the DOM at all.

Within a span, limit the background-image size from a sprite

You can use pseudo element like this

ul {  width: 100px;  overflow: hidden;  line-height: 1.25;}
li {  list-style: none;  margin-bottom:10px;}
a {  text-align: left;  cursor: pointer;  padding: 5px 5px 3px;}
a > span {  padding: 2px 0 2px 20px;  display: inline-block;  font-size: 12px;  vertical-align: top;}a > span:before {  content: ' ';  display: inline-block;  height: 18px;  width: 20px;  background-image: url(http://cpqa.catchpoint.com/HawkUI/App_Themes/NewUI/images/icons/ico-db-sprite.png);  background-repeat: no-repeat;  vertical-align: top;}
a.deactivate > span:before {  background-position: -2px -382px;}
a.delete > span:before {  background-position: -2px -322px;}
a.edit > span:before {  background-position: -2px -362px;}

<ul>  <li>    <a class="deactivate">      <span>Deactivate the service</span>    </a>  </li>
  <li>    <a class="edit">      <span>Edit </span>    </a>  </li>
  <li>    <a class="delete">      <span>Delete</span>    </a>  </li>
</ul>

Scaling an image sprite, using percentage: Possible?

If you'd want a simple fix without worrying about crossbrowser-issues, I'd suggest to use a normal image.

Next, one could use data URIs or use a combo of zoom for webkit/ie and -moz-transform:scale for Firefox or finally break your head on background-size calculations.

You might also want to read: How can I scale an image in a CSS sprite

Hope this helps!

---

Related Topics