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;
}
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.
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.
When you need image for SEO purpose, then use img tag with alt attribute. Otherwise use image in background using css.
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With