Question

All,

I have list items which have a background set to them (RGBA value).

Now I want to add another image using the CSS3 background image property to each list item. For some reason, this image does not show up alongside the list item.

HTML:

                <div id="c_top_bar">
                <ul>
                                        <li id="c_collar" class="c_tabs"><span>Collar/ Neckline</span></li><li id="c_body" class="c_tabs"><span>Body</span></li><li id="c_sleeve" class="c_tabs"><span>Sleeve</span></li><li id="c_colour" class="c_tabs"><span>Colour</span></li>
                </ul>
            </div>

And here is the CSS:

    #c_top_bar ul {
    position: relative;
    top: 30px;
    left: 40px;
    width: 650px;
    height: 48px;
    overflow: hidden;
    border: 1px solid rgba(207,207,207,1);
    -moz-box-shadow: 0px 1px 2px rgba(207,207,207,0.5);
    -webkit-box-shadow: 0px 1px 2px rgba(207,207,207,0.5);
    box-shadow: 0px 1px 2px rgba(207,207,207,0.5);      
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; 
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.c_tabs {
    display: inline-block;
    width: 25%;
    height: 48px;
    list-style-type: none;
    text-align: center;
    -moz-text-shadow: 0px 1px 2px rgba(255,255,255,1);
    -webkit-text-shadow: 0px 1px 2px rgba(255,255,255,1);
    text-shadow: 0px 1px 0px rgba(255,255,255,1);
    background-image: url(tick.png);
}

.c_tabs:first-child {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; 
}   

.c_tabs:last-child {
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

There is a bit more styling Ive applied to the ‘span’ tags but ahve omitted the code as its not of much importance.

My question is that when I enter the following CSS to the .c_tabs class (the li items), the image does not show up, firebug reports that it ‘failed to load the given url’, why?

background-image: url(tick.png);

Many thanks

Answer 1

This is working fine at my end on Firefox. Make sure the image is available on the path. The URL defined in the CSS expect the image file to be available in the same folder as that of the CSS file. If you have the image file in a different location, update the URL accordingly.