CODEWITHSUNDEEP
htmlcss
Garrett
Garrett

Reputation: 45

css background-image won't display in IE or Chrome

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.

Upvotes: 0

Views: 2753

Answers (3)

wvm2008
wvm2008

Reputation: 3034

Try:

height: 100%;

instead.

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

Upvotes: 1

SynXsiS
SynXsiS

Reputation: 1898

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.

Upvotes: 1

Joe
Joe

Reputation: 15802

  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.

Upvotes: 3

Related Questions