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 make CSS width to fill parent?

    How do I overlay a div on an empty div containing a background image?

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    How to clear the (CSS) visited history of an Android WebView?

    How to control CSS cache?

    How to overlay/overlap two div's designed with css to look like text bubbles?

    How to automatically put DIVs in columns (unknown number of DIVs)

    How to create gradient background with CSS in Firefox < 3.6?

    Border display issue, not sure how to resolve

    How to make css menu width impossible to change when zooming or changing resolution?

    how to select image using css

    How to add a class if div height reaches a fixed height?

    how to make background 100% on a top menu

    jQuery - How to animate text simultaneously to color change transition

    How can I make my website width fit fully on iphone 5?

    How to resize grid-view column width?

    How to let Materialize use classes for dropdowns and not ID's?

    How can I create this specific layout using html and css?

    what is jquery CSS frame work and how to use the frame work for giving look and feel to the website? [closed]

    customize bootstrap widths do not know how

    How to maintain hover state even when mouseout of main drop down link

    How to fit img into div circle ?

    How to dynamically change CSS elements to be HTTPS or HTTP

    How to ignore comments in sass partial files?

    How to make one css input type be displayed the same as another input type

    How can I use ellipses in a fluid width table without making each column the same size?

    How to hover a Fixed element until it reaches some point

    How to traverse and click on Next & Cancel Button (On PopUp) using selenium webdriver

    CSS flipping animation in IE: Turned side shows mirror content

    How do I make a div scrollable, without showing a nasty scrollbar?