Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using background image for li

Tags:

css

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;
}
like image 317
Yasir Avatar asked Mar 14 '09 21:03

Yasir


People also ask

How do I use an image as a background tag?

HTML <img> Tag When you want to be indexed by the search engine. Google doesn't index background images automatically. Browsers don't provide any information on background images to assistive technology. But using the <img> tag with the alt and title attributes will help to be recognised by screen readers.

Can you put an IMG inside a Li?

Firstly, you need to create the List Item using a li list item tag. Within that List Item tag, you can place your image. You add an image within the Image tag img. Hope this helps explain it a bit better.

Should I use background image or IMG tag?

When you need image for SEO purpose, then use img tag with alt attribute. Otherwise use image in background using css.


2 Answers

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.

like image 103
Matt Howell Avatar answered Oct 04 '22 13:10

Matt Howell


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; 
        }
like image 37
superUntitled Avatar answered Oct 04 '22 15:10

superUntitled