How to create a background sprite for a href link?

Here’s the code I have to create an image to the left of a link:

<ul class="links">
<li>
<a href="wishlist/wishlist/" title="Wishlist" class="top-link-wishlist">Wishlist</a>
</li>
</ul>

.links a.top-link-wishlist{
	background:url(../images/heart-icon.png) no-repeat;height:16px;width:16px;padding: 0 0 2px 17px;margin: 0 0 0 -2px;
}

I’ve been trying to add the image to my sprite. Here is what i’ve tried (below) but I don’t think it is best. I can get it to work but if the link text changes width as in case it is translated or something it will mess up. What is the correct way to do this?

links a.top-link-wishlist {
    /* display: block; */
    /* content: ''; */
    background: url(../images/sprite.png) -252px 0 no-repeat;
    height: 16px;
    width: 0;
    padding: 0 0 2px 18px;
    /* margin: 0 50px 0 0; */
    /* float: left; */
}

Thanks

Maybe try it as a pseudo element.
.links a.top-link-wishlist::before {}

I’ll give it a try.

When I try:

.links a.top-link-checkout::before{ background: url(../images/sprite.png) -252px 0 no-repeat;height:16px;width:16px;padding: 0 0 2px 18px; }

It doesn’t connect, i guess that’s what you call it when the style doesn’t connect with the class.

I use something more like this and it seems to work for me…

.links a.top-link-checkout:before { content:"";
		display:inline-block;
		width: /* set the width you want here */
		height:/* set the height you want here */;
		margin: /* set your margins for the positioning */
		background: url(../images/sprite.png)  no-repeat 0 0; 
		background-size: cover;
		float: left;	}

That got it Dave.

I had to remove background-size: cover; as that squashed that whole sprite down to 16px.

Thanks

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.