CSS + IE 6 = Background-Image is not showing (and pulling hair out)

Question

I have a web page. This web page looks correct in IE 7, 8 FF 2, 3, 3.5 Safari 3, 4 Opera 9, 10 and Chrome. Essentially everything except IE 6.

The layout even looks fine. The only thing that is not working as expected is that none of the background-images are showing properly. Here is the code that I am trying to apply a background image to:

<div id="theDiv" style="height:29px; width: 100%; background-image: url('/../../Images/divBG.jpg');position:absolute; top:10px;">
  <ul style="list-style-type:none; position:relative; display:inline;">
    <li style="position:relative; display:inline;">Item 1</li>
    <li style="position:relative; display:inline;">Item 2</li>
  </ul>
</div>

My directory structure looks like this

root
-- index.html
-- Images
-- -- Application
-- -- -- divBG.jpg
-- Styles
-- -- Application
-- -- -- mystyle.css

Please note that the CSS information I provided is actually in mystyle.css. However, in an effort to "debug" this, I moved the css code inline with the HTML code. What am I doing wrong?

Thank you What am I doing wrong? This is driving me nuts!

Answer 1

Take out the quotes in the url('...') part. Those aren't necessary and might be causing issues. Also, the URL should be url(Images/Application/divBG.jpg), not url(/../../Images/divBG.jpg), at least if you're doing the CSS inline in the index.html file. If you're doing the CSS in the css file, it would need to be url(../../Images/Application/divBG.jpg') (note, NO beginning slash).

Answer 2

Try this:

'../../Images/divBG.jpg'

Answer 3

'/../../Images/divBG.jpg' does not contain Application folder

perhaps ./Images/Application/divBG.jpg