CODEWITHSUNDEEP
htmlcss
king
king

Reputation: 1344

Why isn't this image showing?

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.

Upvotes: 1

Views: 629

Answers (5)

Rab
Rab

Reputation: 35572

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

Upvotes: 5

impritam
impritam

Reputation: 11

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

} 

html{height:100%;}

body{height:100%;}

May work without the content in the div#header or put some content to the div or use min-height ,it will work.

thankyou

Upvotes: 1

WolvDev
WolvDev

Reputation: 3226

It's cause you're using 100% height and 100% width. Just change it to px values.

Upvotes: 1

JJJ
JJJ

Reputation: 33163

Since there's no content in the div its height is zero, so you don't see anything. Add some content to the div or add a height or min-height to the CSS.

height:100% doesn't work because it sets the element's height to equal that of its parent, and the parent's (#container) height is not set.

See http://tinkerbin.com/QDAEuDUA.

Upvotes: 9

Starx
Starx

Reputation: 78971

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

  1. There is NO stylesheet attached on the first place
  2. 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.

Upvotes: 0

Related Questions