CODEWITHSUNDEEP
htmlcss
Digital
Digital

Reputation: 85

CSS Background Image doesn't display

I'm not sure what I'm missing. I think I have everything defined correctly but the background image doesn't show. Here's the code and jsfiddle, (I used the google logo for the background image in this example. I assume that works?)

#main_links a span {
    display: none;
}
#main_links {
    top: 100px;
    clear: right;
    float: right;
    list-style-type: none;
    width: 728px;
    margin: 0 auto;
    padding: 38px 0px 0px 0px;
}
#main_links li {
    display: inline-block;
    list-style-type: none;
    padding: 0px 20px 0 0;
    height: 29px;
    border: 1px solid #000000;
}
#link1 a {
    width: 113px;
    display: block;
    background: url('https://www.google.com/images/srpr/logo11w.png') no-repeat;
}

http://jsfiddle.net/SqHE8/

Upvotes: 0

Views: 5567

Answers (2)

d.s.now
d.s.now

Reputation: 1

Do the following Check:

  1. Check the image URL.
  2. Set min-height for the image container.
  3. Set background-size.

If the image URL is correct, the possible reason for missing image is you do not set background-size.

Upvotes: 0

Nizam
Nizam

Reputation: 4699

The @CBroe comment is precise (you are not displaying the a content). Then, to see the image you need to set the image to background of #link1 and not #link1 a:

#link1 a {
    width: 113px;
    display: block;
}

#link1 {
    background: url('https://www.google.com/images/srpr/logo11w.png') no-repeat;
}

Upvotes: 4

Related Questions