Geek Answers Handbook

CSS Parallax Background Image White Space in IE

I use the Keith Clark CSS-only method to create a two-layer parallax effect so that the background image scrolls at a lower speed than the rest of the site content. To be clear, the image covers the entire page, and the content is on top of it.

My site is divided into two main div elements (and a div container) - one for the background image and the other for the content of the page. Below is the code I used for different div elements.

 .container { height: 100%; overflow-x: hidden; overflow-y: auto; perspective: 1px; position: absolute; left: 0; right: 0; } .background { background-image: url(images/background.jpg); background-size: cover; position: absolute; /* margin-bottom: -200em; overflow: hidden; */ height: 200em; left: 0; right: 0; transform: translateZ(-2px) scale(3); } .page-content { transform: translateZ(0); }

Without the added margin-bottom and overflow properties, the background div will have a vertical blank space left after it is set to a height high enough to cover the entire contents of the page.

After adding a negative margin, the problem was fixed in Chrome and Firefox *, and I increased the height and negative margin of the div element to be much larger than required to ensure that it will work for different page lengths.

IE 11 still has a space there. Usually the background-size: cover; property background-size: cover; removes any space, but this does not work with the parallax effect.

Do you know any ways to remove spaces that will work for IE9 + and other major browsers, or am I out of luck?

Here's a JSFiddle with almost exactly the same code as the site I'm building.

* Firefox does not have a space, but a negative margin does not work properly for all pages. For shorter pages, you can scroll to the end of the page content. I could fix this by changing the height and margin for each page, but if possible a global solution would be appreciated.

+5
source share
2 answers

There is still no way in IE to make CSS parallax work. But since Webkit-based browsers such as Chrome and Opera (I have not tested Safari) work well with parallax, you can target Webkit browsers and display a parallax background for them and display different code - without parallax - for other browsers.

First, I put the parallax code inside @media queries, for example:

 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .container { [rule contents] } .background { [rule contents] } .page-content { [rule contents] } }

The first attribute (-webkit-min-device-pixel-ratio:0) is for all Webkit-based browsers, but since I assume that not all versions of Webkit browsers will support this parallax effect, I also added a second attribute that limits browsers Chrome 29+ and Opera 16+ (I excluded Safari just to be safe, but you can choose another hack that also targets Safari if you find it works).

It would probably be a lot better to use the function discovery function , but I haven't studied JavaScript yet, and above is a CSS-based solution.

After placing the parallax rules in the @media request, I set an alternative default rule for the div element.

(Although splitting a site into the front and back div elements is not required without parallax, setting the back div element with a background image rather than body or html eliminates a ton of lag.)

To keep as much resemblance to the parallax version as possible, I set the background image to position: fixed .

Because browsers look at the CSS file from top to bottom and apply styles in this order, it is important to have the parallax .back rule (and its surrounding @media request) approaching after the standard, non-parallelax .back in the file.

And, of course, I made sure that all the attributes applied to the standard and parallax .back rules .back present only in the standard one to save space (they will be used by Webkit browsers along with additional rules in the parallax version).

0
source

I think you have a few problems if your goal is to do this work on IE9. This works for me, but not without increasing the height of the div .back size.

This works for me in IE9 and Chrome, but you may just want some IE conventions.

http://jsfiddle.net/Lawrg9mv/21/

Additions:

 .back { height: 80em; -ms-transform: translateZ(-2px) scale(3); } .front { -ms-transform: translateZ(0); z-index: 10; position: relative; }
+1
source

More articles:


All Articles