set a background css sprites image width - css

Question

Is there a way to set a background css sprites image width?
shop
a{
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: block;
background-position: -5px -5px;
padding: 0 0 0 30px;
}
https://jsfiddle.net/jb1prcro/
right now the above a tag is 60px width, 30px for the word 'shop', 30px padding left for the cart icon,
because I am using css sprites for the background icons, right now it is showing 60px of that background image instead of just the 30px I want to show.
I also tried background-size: 30px 30px for this A tag, but it doesn't work.

Answer 1

You can use the pseudo-element before:
a{
display: inline-block;
background-position: -5px -5px;
padding: 0 0 0 30px;
height:30px;
vertical-align:middle;
}
a:before {
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
width:30px;
height:30px;
display:inline-block;
content:'';
vertical-align:middle;
}
Working example: https://jsfiddle.net/mspinks/jb1prcro/2/

Answer 2

I am not sure what exactly you are trying to achieve, but here's a practical example:
https://jsfiddle.net/ozL0yzuy/
a {
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: inline-block;
width: 40px;
background-position: -10px -20px;
}
You have to set a width (and actually also a height, which I didn't do in the example) for the element itself (in this case the a tag, which can only be done if its a block or inline-block element). Then you can adjust the background position accordingly.