I have managed to get a sprite as a background image for a list I have on a page, but as it needs to use absolute, its not looking good in responsive mode when the text in each list starts moving beneath itself, then what happens is the image stays always in exactly the same position and doesnt move with its list item, think that sort of explains it.
<ul>
@for (var i = 1; i < 7; i++)
{
<li class="moduleIcons@(i) list"></li>
}
</ul>
.moduleIcons1:before {
background: url(/Images/moduleIcons/module_Icons_Sprite.png) no-repeat -7px -8px;
width: 34px;
height: 34px;
display: block;
position: absolute;
content: " ";
top: -2px;
left: 20px;
border: solid 1px #000;
}
.moduleIcons2:before {
background: url(/Images/moduleIcons/module_Icons_Sprite.png) no-repeat -7px -57px;
width: 34px;
height: 34px;
display: block;
position: absolute;
content: " ";
top: 40px;
left: 20px;
border: solid 1px #000;
}
etc
So is there a way the background image can move as a normal list style type would, rather than being rigid to its position on the page regardless of where its list item moves too up or down the oage.