How To Create Full Screen Fixed With Scrolling Background Images


Tags: css3,internet-explorer-8,fullscreen,css-position

Problem :

I did this before, so I know it's possible, but now it won't work and it's messing with my brain! So hopefully, before I smash all the IE's in the neighborhood to a million bits, somebody can help me out with this.

What I'm trying to do is recreate something like the Ornamento website. When the user scrolls on it, the pictures overlap each other. They are done with layered fixed background images in separate divs. The effect looks like this:

This is the website unscrolled:

Ornamento Unscrolled

And this is the website scrolled

Ornamento Scrolled

As you can see, the background image stays in the same place but is gradually overlayed, or "taken over", by the other background image in a different div. This works in Chrome, Firefox, Opera, IE10, IE9, Safari and IE8 (probably others). It's being done with CSS3 background cover and fixed background positioning.

So, I attempted to duplicate this on my beta site, Striking Foto. I got it to work in everything except legacy IE (8 and down). I was using the IE filter for a full background image and it looked good.

I used the following code (there are 5 divs with content in them, each labeled home, about, gallery, pricing, 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 this IE filter only works when the image is referenced with a link from the index file, not the CSS file. I may be wrong on this, but that's why the links aren't the same.)

I assumed this would work, but it didn't. When I scrolled in IE I saw this happening:

IE8 Not Scrolling Correctly

Instead of the fixed background positioning, the background image is scrolling. So I figured it was the IE filters because they like to fork everything up. So I removed them and tried again. This time I got the following image:

IE8 Not Scaling Correctly

Now the image scrolls right, but the background image isn't full screen.

My HTML looks like this (edited to make it smaller and more readable).

 <!DOCTYPE HTML>
 <html>
 <head>
 <title>Striking Foto</title>
 <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 </head>

 <body>
 <header></header>

 <div id="home">
    <!--nothing except images-->
 </div>
 <div id="about">
    <div class="wrap">
        <article>
        <!--nothing except content-->
        </article>
    </div>
</div>
<div id="gallery">
    <div class="wrap">
        <article>
        <!--content-->
        </article>
    </div>
</div>   
<div id="pricing">
    <div class="wrap">
        <article>
        <!--content-->
        </article>
    </div>
</div>   
<div id="contact">
    <div class="wrap">
        <article>
            <!--content-->
        </article>
    </div>
</div>  
</body>
</html>

And so, I am stuck. Somehow Ornamento does it in IE, and I have done it before, but I don't know how and I could really use some help. I can provide all the CSS if you'd like, but you can also just look at it online.

Thank you so much!



Solution :

I realised with this that the images on ornamento.com are not full width. Stretch your browser as wide as you can, you'll see ;-)

The best option is to use http://srobbin.com/jquery-plugins/backstretch/ with a ie conditional and the images don't scroll in ie

or make the images big enough that the edges are not seen in ie, they will still look ok in other browsers which size as "cover"

Hope this helps anyone else who finds this! I spent hours on it


    CSS Howto..

    How to add css only to options page of a plugin in wordpress?

    How to remove blue underline on text in Chrome - CSS?

    How to change the Img tag src through css only? [closed]

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?

    How to test file size on rspec (Rails 4/rspec3)

    How can I add a css element change to an onlick event in this jquery lib?

    How do I specify in HTML or CSS that a table column should have the minimum width

    Div style in css, how to start under then button

    CSS how to translate an image up, and have the div adjust to the new size?

    How to style a

    inside a div with css [closed]

    How to make separating lines/borders in a table disappear with CSS?

    How to get messages column up on the right?

    How to style Anchor in GWT?

    How can I fix the menu on the implanted header?

    How to include php page which include also a css file?

    How can I make a table column width somewhat similar automatically?

    Fixing my CSS: How to get the lists and titles to work?

    Foundation 6: how to handle images that has an vertical overflow within one row?

    How can i style textnodes that are direct children of a body-element?

    How to wrap image around the long text?

    How to use variable in CSS? [duplicate]

    how to make css tooltip not push elements outline in FF

    How do I format an angular drop down menu?

    How the browser identifies the CSS framework? [closed]

    How can I create this centered header with multiple colors?

    How to make a CSS animation/transition play at a fixed speed, not a fixed duration? [duplicate]

    How to create dropdown navigationbar without float?

    How do I center the contents in this div?

    CSS - How to position a fixed sidebar div relatively to a centered content div

    How to use CSS to select an element only if a specific element comes after the one you want to select?