CSS背景图片将不会在IE或Chrome中显示

Question

I am attempting to use background-image:url('path/to/image.png'); to place a background image in a div by ID:

#logo_block > #main_logo {
background-image: url("img/JaxonsBlack.png");
width:450px;
height:auto; }

and the html is as such:

    <div id="logo_block">
        <!-- This will remain static. -->
        <div id="main_logo">
            <!--<img id ="logo" src="img/JaxonsBlack.png" width="400" />-->
        </div>

        <!-- This div will be dynamically populated in the future
        it resides immediately under the logo image-->
        <div id="sub_title">
            <h3>sample</h3>
        </div>
    </div>

Ok, so no matter what I try, I can't get this to work.

1. its not a pathing issue. The img tag in the html below works fine when its not commented out. I can apply the very same CSS to the body and it works fine as well.

2. Selectors. Its not those. I look at Chrome's developer tools and the style is being applied to the div appropriately. I have also removed the div from the parent div and used simply #main_logo as the selector, tried a class, etc etc etc.

3. Height. its not the height style. I've seen that mentioned, and with or without height, width, etc, it still doesn't work.

I can't seem to find any info on this issue anywhere. My syntax is correct as far as I can see, and multiple sites support that. This doesn't work in Chrome or shudder IE. My FF install is currently broken (again) so I haven't tried it there. I somehow doubt it'll be any different, but if it doesn't work in Chrome or IE, I still need to figure this out.

I'm at my wit's end on this. It simply doesn't make sense.

Answer 1

1. It is the height style. height is set to auto , so it'll only be as tall as it needs to be to show all the content, but there's no content in there, hence it's 0px tall.

http://jsfiddle.net/Z632P/ - change the height to auto then back to 100px .

Answer 2

Try:

height: 100%;

instead.

If it's working in other browsers, this should fix it.

Answer 3

Is your style defined in a separate css file? If so, the path should be relative to the css file, not to the html file. So if you have your css file in /styles/blah.css and you have the url img/JaxonsBlack.png, it will look for it in /styles/img/JaxonsBlack.png. If this is the case you can fix it by changing it to /img/JaxonsBlack.png. As others have mentioned, the div will not have a vertical height unless it has content, or you define one.