CODEWITHSUNDEEP
css
robertwbradford
robertwbradford

Reputation: 6595

Add background image to <ol> numbers

I can't figure out an elegant way to accomplish the following using CSS:

screenshot

I need the numbers of the ordered list to have the teal bubble-looking background. I have this image (which includes the white stroke):

bubble

But I can't figure out how to put it behind each of the numbers using CSS. Thanks.

Upvotes: 15

Views: 13682

Answers (4)

Suman
Suman

Reputation: 31

I would prefer in following way

 /* reset the ol counter with class liststyled*/
ol.liststyled {
counter-reset: item;
list-style-type: none;
list-style-position: inside;
padding-left: 0;
}
/* make the li relative */
ol.liststyled li{
position: relative;   
padding-left: 35px;
}
/*add absolute positioned img element background to our relative li */
ol.liststyled li:before{
font-size: .8em;
line-height: 25px;
vertical-align: middle;
width: 25px;
color: #fff;
text-align: center;
height: 25px;
content: counter(item) "  "; 
counter-increment: item ;
position: absolute;
left: 0;
background: url('../img/bulletolback.png') center no-repeat;
}

Upvotes: 3

mdon88
mdon88

Reputation: 314

This seems the best way to me.... Customize Ordered Lists with the ::before Pseudo- Element

Upvotes: 2

eagle12
eagle12

Reputation: 1668

I would probably do something like this:

ol {
    list-style-position: inside;
    color: white;
}
ol li {

    background-image: url('nswCH.png');
    background-position: -5px;
    background-repeat: no-repeat;
    padding-left: 7px;
}

Upvotes: 20

user456814
user456814

Reputation:

Use list-style-image css rule with the url for the image. Here is an example from the Mozilla documentation for CSS,

ul { 
    list-style-image: url("images/arrow.gif") 
}

You can also check out their live demo.

Oh wait, I just realized that that won't let you have the numbers in the images...ok, well this at least gets you partially the way there...

Upvotes: 0

Related Questions