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..

    HTML/CSS How to format Text and have an Image floating next to it

    How to remove the css class

    How to restore WordPress theme style,css from caches on internet

    How to change tooltip style in jQuery vmap?

    How to draw solid/dotted/dashed lines using most basic HTML/CSS possible (for tcpdf to render them correctly)

    How to change CSS property before element is created?

    How do I keep a CSS hover rule applied when the mouse moves to the child element?

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    How to put a space between the hover effect in this situation css html php?

    How to center multiple inline-block elements with CSS?

    How to split multiple string using jQuery or javascript?

    Show outlines around divs in a web-based HTML editor, a la Dreamweaver and other editors

    How to create four even and fluid css columns?

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

    How to put images to the right and text to the left in css

    Safari displays font differently from other browsers -Set specific font-family for specific browser - How to change font smoothing for Safari [closed]

    How to edit the correct phone number in my script?

    How to add the footer with social icons in bootstrap?

    W3.CSS how to make container centered inside another container

    jQuery/CSS - How to style the first occurrence of an element inside of another element?

    Yahoo's new blur effect in web mail - How?

    How to remove the default active tab color when another tab is active using jquery

    How to align nav drop down menu in css?

    how to rotate text with css? transform is not supported by current schema?

    css 3d perspective not showing up correctly in certain browsers

    How to hide the third nested list in this css dropdown nested lists?

    How to correctly align left in CSS?

    How to position text over an image in css

    CSS: how to apply styles to the last of a CSS class (not the last of )

    How should I modify this code so it works with severel id's?