CODEWITHSUNDEEP
css
Yasir
Yasir

Reputation: 3907

using background image for li

I'm using a background image for a <li> that will be used as a button, but it's not fully shown; however, when write text then it shows. I don't want text to be written it's already printed on background image. I am unable to set a width - how can I fix this?

#footernav li#footerlocation
{
    display: inline;
    padding-right: 20px;
    background-image: url(../images/ourlocation.jpg);
    background-repeat: no-repeat;
    background-position: 0 -.2em;
}

Upvotes: 12

Views: 81567

Answers (6)

MiPhyo
MiPhyo

Reputation: 49

We can simply add the following css rule: 

ul.check-list{  
    list-style-image: url(images/tick.jpg);
}

Upvotes: -1

Gopal Gautam
Gopal Gautam

Reputation: 39

May be help in this

.tab-content ul li{display: block;padding-left: 30px;background-image:url('images/blue-icon.png');background-repeat: no-repeat;background-position: 0 2px;margin-bottom: 10px;}

Upvotes: 0

meetsankar
meetsankar

Reputation: 86

Yes i have the same problem, i just removed css style display: inline and add display: list-item; float:left; my problem solved, hope this helps.

Thanks, Sankar B

Upvotes: 4

superUntitled
superUntitled

Reputation: 22527

Take a look at the following example:

   ul#footernav li { 
        display:inline; 
        }
    ul#footernav li a{ 
        display:block; 
        width:155px;
        text-indent:-9999px;
        }
    ul#footernav li.footerlocation a{ 
        height:30px ; 
        background: url('images/image.jpg') bottom left no-repeat; 
        }
    ul#footernav li.footerlocation a:hover{ 
        height:30px ; 
        background: url(images/image.jpg) top left no-repeat; 
        }

Upvotes: 7

Sruly
Sruly

Reputation: 10540

set the width and height for the image

Upvotes: 0

Matt Howell
Matt Howell

Reputation: 15936

Your problem is in setting display to inline. If you want background and width, but you also need an inline-type list, set float: left.

Upvotes: 13

Related Questions