CSS Background Image doesn't display

Question

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/

Since you removed all content from the a elements, they get no height until you set one. — C3roe
– C3roe, Commented Feb 5, 2014 at 3:10
Explaining better, the problem is not the height or the elements being removed. The problem is that the a content is not visible. — Nizam
– Nizam, Commented Feb 5, 2014 at 3:32

Nizam · Accepted Answer · 2014-02-05 03:33:44Z

4

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;
}

edited Feb 5, 2014 at 3:33

answered Feb 5, 2014 at 3:27

Nizam

4,7193 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Koper Over a year ago

it's kind of funny that you get the reputation points for CBRoe's answer, but he should have posted it in the answer section and not the comments section

beaver · Accepted Answer · 2017-12-01 07:04:05Z

0

Do the following Check:

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

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

edited Dec 1, 2017 at 7:04

beaver

17.8k2 gold badges43 silver badges70 bronze badges

answered Dec 1, 2017 at 5:51

d.s.now

11 bronze badge

Collectives™ on Stack Overflow

CSS Background Image doesn't display

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related