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.
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.
What happens if you add position:relative to .moduleIcons1, .moduleIcons2 etc? An absolutely positioned element takes its position from its nearest positioned ancestor. So it could be the top and left values are calculated based on an element that the list items are inside of which has been given a position…
Going a bit off-topic from the original problem, but you could cut down the size of your css by removing the common property/value pairs to a common selector, so only the unique values are applied to every individual class.