CSS background-image doesn't work

Question

I have a problem to visualize (in all browsers) the background-image that I use in the CSS:

HTML:

<div class="container">
    <div class="row" style="margin-top:-5px;">
        <div class="col-xs-1"></div>
        <div class="col-xs-10">
            <div class="box1" style="width:311px; float:left;">
                <div class="markermenu">
                    <ul>
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                        <li><a href="#">Four</a></li>
                        <li><a href="#">Five</a></li>
                    </ul>
                </div> 
            </div>

CSS:

.markermenu{
    width: 311px; /*width of menu*/
}

.markermenu ul{
    list-style-type: none;
    margin: 1px 0;
    padding: 0;
    border: 1px solid #9A9A9A;
}

.markermenu ul li a{
    background:url(img/lens.png) no-repeat 2px center;
    height:79px;
    color: #00014e;
    display: block;
    width: auto;
    padding: 30px 0;
    padding-left: 90px;
    text-decoration: none;
    border-bottom: 1px solid #B5B5B5;
}

* html .markermenu ul li a{ 
    width: 150px;
}

.markermenu ul li a:visited, .markermenu ul li a:active{
    color: #00014e;
}

.markermenu ul li a:hover{
    color: black;
    background-color: #ffffcb;
    background-image:url(img/icon/arrow.png); 
    z-index:10;/*onMouseover image change. Remove if none*/
}

The problem is that I don't see the images on background...someone know why..? Thanks so much.

Resolved. Thanks!!! Another question...if i wont use a different image for avery voice of the menu (normal and hover) AND if i wont use two image for every voice, how i must modify the html and css??? thanks so much

Answer 1

You will have to check the path of the background-image in the

.markermenu ul li a { }

and

.markermenu ul li a: hover { }

classes.

If you have provided the path correctly then your code should work fine. See this fiddle:

http://jsfiddle.net/Qy2T2/

Answer 2

Background - Shorthand Property

Format:

background: <color> url("<image path>") <repeat> <x> <y>;

Example:

body { background: #FFFFFF url("MyImage.png") no-repeat right top; }

Working Example

Make sure you check your image path.