Why isn't this image showing?

Question

Question by sab

I made a header image, but for some reason I can’t get it to appear from CSS.

Here’s a screenshot:
enter image description here

The header is in the same image directory as the index.html file. The background image is appearing, but not this header. I typed the header twice in the HTML as a div to test it in two different spots to see if it is working, but for some reason it is not showing up, I don’t get it lol.

Thanks.

#header {
        background-image:url('../emailheader.png');
        width:100%;
        height:100%;
        background-repeat:no-repeat;

 } 

<div id="header"></div>

Here’s an example of it. But I am not sure why it doesn’t work.

Answer 1

Answer by Rab Nawaz

Rab Nawaz

DEMO

You need provide height OR it will be dependent on the height of the inner content, which 0

 #header {
            background-image:url('http://i.imgur.com/ncTiy.png');
            width:100%;
            background-repeat:no-repeat;
            height:200px;
     }

Answer 2

Answer by Starx

Starx

On seing the screenshot of the code. I found two problems.

There is NO stylesheet attached on the first place
header is used to identify two different elements. (Also mentioned by Blaster)

However, the main reason why it is not showing up in tinkerbin, is because the div neither contains any elements nor has a fixed dimensions. Check this update of your bin.

Why isn't this image showing?

Question by sab

Answer by Rab Nawaz

Answer by Starx

Author: Nabin Nepal (Starx)

Please fill the form - I will response as fast as I can!