Using sprite background image in li

HTML & CSS
1

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.

2

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…

3

Hi, ye I tried that and it just disappears somewhere or just maybe doesn’t show at all, it just leaves an empty space.

4

Actually I just tried it again, and the image is there, just it seems to take up the whole row pushing the text to its right beneath it

.moduleIcons1:before {
    background: url(/Images/moduleIcons/module_Icons_Sprite.png) no-repeat -7px -8px;
    width: 34px;
    height: 34px;
    display: block;
    position: relative;
    content: " ";
    border: solid 1px #000;
}
5

I think this might just work as I have it below, it looks ok on the page.

.moduleIcons1:before {
    background: url(/Images/moduleIcons/module_Icons_Sprite.png) no-repeat -7px -8px;
    width: 34px;
    height: 34px;
    display: block;
    position: relative;
    content: " ";
    border: solid 1px #000;
    float:left;
    margin-left: -35px;
    margin-right: 10px;
}

.moduleIcons2:before {
    background: url(/Images/moduleIcons/module_Icons_Sprite.png) no-repeat -7px -57px;
    width: 34px;
    height: 34px;
    position: relative;
    content: " ";
    border: solid 1px #000;
    float: left;
    margin-left: -35px;
    margin-right: 10px;
}
6

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.

.modules li::before {  /* Applied to all items */
    background-image: url(/Images/moduleIcons/module_Icons_Sprite.png);
    background-repeat: no-repeat ;
    background-position-x: -7px
    width: 34px;
    height: 34px;
    display: block;
    position: relative;
    content: " ";
    border: solid 1px #000;
    float:left;
    margin-left: -35px;
    margin-right: 10px;
}

/* Unique values for individual items */
.moduleIcons1:before {
    background-position-y: -8px;
}
.moduleIcons2:before {
    background-position-y: -57px;
}

This would require the addition of the class .modules to the <ul> element.

<ul class="modules">

Don’t Repeat Yourself

2 Likes
7

Morning SamA74,

Ye I eventually got to that, makes it all a lot easier to use.

<ul>
{
<li class="moduleIcons@(i) list moduleIconGroup"></li>
}
</ul>

.moduleIcons10:before {
    background: url(/Images/moduleIcons/module_Icons_Sprite.png) no-repeat -64px -154px;
}

.moduleIcons11:before {
    background: url(/Images/moduleIcons/module_Icons_Sprite.png) no-repeat -70px -203px;
}

.moduleIcons12:before {
    background: url(/Images/moduleIcons/module_Icons_Sprite.png) no-repeat -66px -252px;
}
.moduleIconGroup:before {
    width: 40px;
    height: 34px;
    display: block;
    position: relative;
    content: " ";
    float: left;
    margin-left: -35px;
    margin-right: 7px;
}
8

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