CODEWITHSUNDEEP
csshtml-listsbackground-image
Brett
Brett

Reputation: 20049

Set background width / height within list tag whilst using sprites

Ok, I have a situation where I need to display a custom image for the list bullets; obviously you can do this via list-style-image; however I want to use a sprite.

So another method I came across was to just put the background on the li itself, however without being able to restrict the width/height of the background more of the sprite shows.

I read this solution but..

  1. It didn't seem to work for me for some reason - no background image showed at all
  2. I would like to support IE8 (extra styles ok though)

I also tried doing something like this and floating the divs inside:

<ul>
    <li>
        <div class="icon"></div>
        <div class="text"></div>
    </li>
    <li>
        <div class="icon"></div>
        <div class="text"></div>        
    </li>
</ul>

... but if the text wrapped to the next line it would go under the icon as the icon height didn't extend high enough.

Is there anything I can do here?

Upvotes: 0

Views: 81

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

You can use pseudo :before element for styling list

ul {
    list-style:none;
    padding: 0 0 0 40px;
}
ul li {
    position:relative;
    margin:5px 0;
}
ul li:before {
    content:'';
    background: url('http://blog.fogcreek.com/wp-content/uploads/2013/01/sprite.png') no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 1px solid black;
    vertical-align: middle;
    background-position: -197px 0px;
    position: absolute;
    left: -34px;
    background-size: 492px auto;
}
<ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. amet, consectetuer adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing amet, consectetuer adipiscing elit. elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>

Upvotes: 1

Related Questions