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!
'/../../Images/divBG.jpg' does not contain Application folder
Take out the quotes in the url('...') part. Those aren't necessary and might be causing issues. Also, the URL should be
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).