No background image in IE8,9

I can’t see the background image and my banner in IE8 and 9 on my site here; http://bmw.apatalk.com/template.html

I was wondering why that is?

On a sidenote, is there a better way for me to code the site so that my banner is stretched across the width of the monitor and have the other stuff centered? I am currentlly using positioning but I am sometimes unsure of myself if the code will render properly across all browsers. Seems like it’s not already with IE8,9 :frowning:

I was able to see your banner in all the IE browsers. If you want to center your background, change the “top left” to “top center.”

that’s wierd. my browsercam showed that the images weren’t appearing. here’s one such example; http://home.browsercam.com/ViewImage_public.aspx?prjID=567544&id=26928171

could it be that browsercam is bugged ?

why would i want to center my background? it’s tiled repeatedly across the x-axis

Maybe I misunderstood you. Are you talking about that background graphic of the cars?

The page styles kick in when the page is refreshed.

Your embedded stylesheet is currently at the end of your code, outside the html element so move it into the <head> of your page, and change its opening tag to <style type=“text/css”>.

There’s no apparent reason for the XHTML 1.0 Transitional DOCTYPE to be used here, so consider switching to XHTML 1.0 Strict.

Add alt attributes to your img elements and your code will then be valid.

  • Interestingly enough, when I hit the “Refresh” button on my IE9 browser, I was able to see the background image and the proper layout (there’s a couple of list elements out of place in that case…also, I assume you refer to the blue background…bg.jpg). What I notice when looking at the source code is that the CSS code comes after the HTML code - my “guess” is that IE is applying everything from top to bottom, and doesn’t bother “re-applying” the CSS at the bottom, until I hit refresh. So perhaps try putting your CSS up top?

I think I understand your question. I mistook “banner” for the background image of the cars. Do you mean your logo? Do you want the logo “BMW Excluservice?” to stretch across the screen 100% width, with the blue bar extending across the page?

If that is what you mean, you can do that usually by taking part of the logo that repeats on the x and making it a background image for a DIV, so that it stretches the width of the screen. And the logo gets placed in that DIV. Although since you are using a PNG with transparency, it might run into problems with the overlap. In that case, I think you could use positioning of the background image to get around that. Never tried that before, but you could try it out.

actually binykern had it correct. i put my css at the bottom and so i couldn’t see the banner and gradient background appear…or at least my browsercam couldn’t see it. it’s now fixed.