I have a problem with a website I am working on. I am trying to position an image with img src to be used with a parallax scrolling script (http://www.kirupa.com/html5/smooth_parallax_scrolling.htm). The positioning of the image seems to work well on almost all browsers and there are no problems with the positioning of this background picture. But in IE (version 6,7, 8 and 9 but not 10) the positioning seems to be completely wrong, it is not behind the content but completely above and too much to the left (the website can be viewed here: www.waliwasi.nl, the screenshot of the problem in IE: www.waliwasi.nl/ie.jpg). Here is some scripting i used:
In the html section i have:
<div id=“bg”>
<img src=“background.jpg”>
</div>
And as the css i have this:
#bg {
left: 50%;
margin-left: -1000px;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
height: auto;
background-repeat: no-repeat;
}
#bg img {
width: 2000px;
height: auto;
background-repeat: no-repeat;
}
How can I fix this problem? It is probably some stupid thing but for some reason I cannot figure out how to fix this.
PS: I know the coding of the website is complete ****, but i was just asked to implement parallax scrolling and not to rewrite the whole code.
Thanks alot in advance!!
