CODEWITHSUNDEEP
cssbackground-image
Kayote
Kayote

Reputation: 15617

CSS - background image to a li item

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

Upvotes: 2

Views: 8179

Answers (3)

bjan
bjan

Reputation: 2030

Relative path would work like this background-image:url("../Images/transparent.gif"); while CSS is within a Stylesheets folder and both Stylesheets and Images folders are in the root of same folder

Upvotes: 1

Kangkan
Kangkan

Reputation: 15571

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.

Upvotes: 4

Varada
Varada

Reputation: 17042

You can use some thing like 

background:url(tick.png) 0 100% repeat-x;

instead of background-image: url(tick.png);

here I used repeat-x; to repeat the image in x axis. You can use repeat-y; or no-repeat; too.

Upvotes: 0

Related Questions