CODEWITHSUNDEEP
htmlcsshtml-lists
Val Okafor
Val Okafor

Reputation: 3437

CSS Horizontal List Background Image Not Showing

I am trying to add a background image to a simple horizontal list and for some reason, I am unable to get it to show. This is a static HTML/CSS practice page that can be viewed @ DropBox

Here is my HTML markup

<section class="welcome-msg">
            <p>Good Morning</p>
            <ul>
                <li>Edit Bill</li>
                <li>Mark Bill as Paid</li>
                <li>Bill Details</li>
                <li>Help</li>
            </ul>

</section>

And here is the CSS 

.welcome-msg li {
    display: inline;
    float: left;
    margin: 0 20px; 
    background-image: url(Image/details-icon.png);
    background-repeat: no-repeat;
    /*background-position:5px 0px;*/
}

And here is the screenshot of the image folder

Upvotes: 0

Views: 807

Answers (2)

nick
nick

Reputation: 3711

You image folder isn't in the same folder as your CSS file. 

  -CSS
  --style.css
  -Images
  --img.png
  --img2.png

You therefore need to go a level up first (out of the css folder) and then into the Image directory. This is achieved by using ../ at the beginning of the path.

Therefore your URI should be:

 background-image: url(../Image/details-icon.png);

Upvotes: 2

z1m.in
z1m.in

Reputation: 1661

Please use developer console (F12) for debugging.

enter image description here

Problem with incorrect path.

background-image: url(../Image/details-icon.png);

Upvotes: 1

Related Questions