I have done this before, so I know that this is possible, but now it will not work, and it is messing with my brain! Hopefully before I smash the whole IE in the neighborhood to a million bits, someone can help me with this.
What I'm trying to do is recreate something like Ornamento . When the user scrolls it, the images overlap with each other. They are executed with layered fixed background images in separate divs. The effect is as follows:
This website is not displayed:
And this is a scrolled website
As you can see, the background image remains in the same place, but is gradually superimposed or “captured” by another background image in another div. This works in Chrome, Firefox, Opera, IE10, IE9, Safari, and IE8 (possibly others). This is done using CSS3 artwork and fixed background positioning.
So, I tried duplicating this on my beta site, Striking Foto . I got it to work in everything except the old IE (8 and below). I used the IE filter for the full background image and it looked good.
I used the following code (it has 5 sections with content, each of which is marked at home, oh, gallery, price and contact:
#home, #about, #gallery, #pricing, #contact { position: relative; display: block; height: 100%; width: 100%; background: url(../assets/style_images/home_background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border-bottom: 5px solid #000; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='assets/style_images/home_background.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/home_background.jpg', sizingMethod='scale')";} #about { background-image: url(../assets/style_images/about_background.jpg); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/about_background.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/about_background.jpg', sizingMethod='scale')";} #gallery { background-image: url(../assets/style_images/gallery_background.jpg); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/gallery_background.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/gallery_background.jpg', sizingMethod='scale')";} #pricing { background-image: url(../assets/style_images/pricing_background.jpg); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/pricing_background.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/pricing_background.jpg', sizingMethod='scale')";} #contact { background-image: url(../assets/style_images/contact_background.jpg); border: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/contact_background.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/contact_background.jpg', sizingMethod='scale')"; }
(Note. I believe that this IE filter only works when the image is referenced from an index file and not a CSS file. Maybe I'm wrong, but why the links don't match.)
I assumed this would work, but it is not. When I scroll in IE, I saw this:
Instead of fixed background positioning, the background image scrolls. Therefore, I thought that these are IE filters because they like to shell out. So I deleted them and tried again. This time I got the following image:
Now the image scrolls to the right, but the background image is not full-screen.
My HTML looks like this (edited to make it smaller and more readable).
<!DOCTYPE HTML> <html> <head> <title>Striking Foto</title> </head> <body> <header></header> <div id="home"> </div> <div id="about"> <div class="wrap"> <article> </article> </div> </div> <div id="gallery"> <div class="wrap"> <article> </article> </div> </div> <div id="pricing"> <div class="wrap"> <article> </article> </div> </div> <div id="contact"> <div class="wrap"> <article> </article> </div> </div> </body> </html>
So I'm stuck. Somehow Ornamento does it in IE, and I did it before, but I don’t know how I could really use some help. I can provide all the CSS if you want, but you can also just look at it online.
Thank you very much!