Member Avatar for nikk8a

Hi,

I am trying to use an image sprite for icon in my button. Following is my css class for the same. The problem I am facing is that it seems to be pulling even the neighbouring image (which might be due to bigger text on the button)
Is there any way to handle this?

.sprite-reset {
    background: url(../images/composite_image.gif) no-repeat !important;    
    padding: 0px 0px 0px 19px !important;
    background-position: 0 -465px !important; width: 50px ; height: 16px;
}

Attaching the button screenshot herewith.

Thanks in advance!

reset_address.JPG 1.83 KB
Edited by nikk8a
  • 2 Contributors
  • 3 Replies
  • 212 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by nikk8a

Dani AI

Generated

Applying the sprite to the full button is the most common reason an adjacent icon shows through: the button’s size, padding or line-height can change which part of the sprite is visible, and tightly packed sprites will "bleed" into the visible area. As suggested, moving icons inside the sprite removes the problem but, as noted, that breaks other consumers of the same sprite. A safer approach is to isolate the icon into a fixed-size element (or a :before pseudo-element) so the sprite is clipped exactly to the icon area regardless of the button text.

Example using a dedicated inline element (keeps existing sprite unchanged):

<button class="btn">
  <span class="btn__icon" aria-hidden="true"></span>
  Button label that can be long
</button>
.btn { position: relative; padding-left: 26px; /* leave room for icon */ }

.btn__icon {
  display: inline-block;
  width: 16px;              /* icon width in the sprite */
  height: 16px;             /* icon height in the sprite */
  background-image: url('../images/composite_image.gif');
  background-repeat: no-repeat;
  background-position: -Xpx -Ypx; /* set to the icon's coordinates in the sprite */
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}

If markup cannot be changed, an equivalent using .btn:before will work. Additional troubleshooting tips: ensure the icon element’s width/height exactly match the icon in the sprite; add a 1–2px transparent gutter between icons in the sprite to prevent bleed; temporarily apply a visible border or background color to the icon element to confirm the clipped area; and verify no other CSS (line-height, transforms, background-size) is scaling the button or sprite. This isolates the sprite usage per-button and avoids wholesale sprite rearrangement while remaining compatible with other existing sprite consumers.

Recommended Answers

All 3 Replies

Member Avatar for EvolutionFallen

Why not rearrange your sprite so the red X image is far enough below the green arrow so that you don't see it?

Member Avatar for nikk8a

Hi EvolutionFallen,

Thanks for your reply.

Rearranging would impact many other places which are already using other images from this same sprite.
Hence, that would not be a feasible option here.

Member Avatar for nikk8a

Any idea anyone please?
Thanks for the help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.