HTML: background-image not displaying

Question

I wanted a specific div of mine to have its own specific background with the width of 100% so it's covering the entire div, why won't the background image show. See here

score 1 · Accepted Answer · answered Oct 27 '14 at 12:51

1

You need to add height and width property in order you want to use a background-image.

#counter1 {
    background-image: url(http://i.imgur.com/7NMEPIo.jpg);
    width:600px;height:340px;
}

here is a fiddle with a working version

You should reconsider using other font colors ;-)

answered Oct 27 '14 at 12:51

Michael Schneider

496
1
9
27

Hello and thank you for the answer, just a very small question if I may. I would like to make the width for my picture to be 100% so all along the site, and for it to no-repeat. However every time I do so it will only cover 25% of the site, do you think you know the answer? [See here](http://jsfiddle.net/huspk2j1/14/) – arrey Oct 28 '14 at 14:12
Maybe this can help you: http://stackoverflow.com/questions/235855/how-do-i-stretch-a-background-image-to-cover-the-entire-html-element – Michael Schneider Oct 28 '14 at 14:14

score 0 · Answer 2 · answered Oct 27 '14 at 12:53

Element with id=counter1 has no content* (float move elements out of document flow), div's height is 0 and it's reason why you don't see backgrond image.

#counter1 {overflow: hidden}

http://jsfiddle.net/huspk2j1/9/

*) Check this fiddle http://jsfiddle.net/huspk2j1/11/, I've added border: 1px solid blue to #counter1 to show you it's empty.

score 0 · Answer 3 · answered Oct 27 '14 at 12:53

Basically because the floating counters don't cause it's parent to calculate height properly. You can fix this with a overflow: hidden property.

#counter1 {
    background-image:url(http://i.imgur.com/7NMEPIo.jpg);
    overflow: hidden;
}

http://jsfiddle.net/huspk2j1/8/

score 0 · Answer 4 · answered Oct 27 '14 at 13:25

0

In order to fix this you can simply add an element with clear: both at the end of your container.

See updated code here: http://jsfiddle.net/aksruLLh.

answered Oct 27 '14 at 13:25

SmartDev

2,802
1
17
22

You'd need more markup for this. I'd argue the `overflow` method is cleaner. – Hless Oct 27 '14 at 13:50

score -1 · Answer 5 · answered Oct 27 '14 at 13:00

-1

Add

#counter1:after {
    clear: both;
    content: "";
    display: table;
}

to your css.

See http://jsfiddle.net/huspk2j1/12/

answered Oct 27 '14 at 13:00

MIvanIsten

481
3
7

HTML: background-image not displaying

5 Answers5