lundi 20 avril 2015

CSS Parallax Background Image White Space

I'm using Keith Clark's CSS-only method to create a two-layer parallax effect so that the background image scrolls at a slower speed than the rest of the site's content. Just to be clear, the image covers the entire page and the content sits on top of it.

My site is divided into two main div elements (and a container div) - one for the background image, and the other for the page's content. Below is the code I was using for the empty background div element.

.background {
  background-image: url(images/background.jpg);
  background-size: cover;
  position: absolute;
  height: 200em;
  left: 0;
  /* margin-bottom: -200em;
     overflow: hidden; */
  right: 0;
  transform: translateZ(-2px) scale(3);
  z-index: -10;
}

Without the margin-bottom and overflow properties added, the background div element would end up having vertical white space left over once it was set to a height high enough to cover all the page's content.

I don't know what caused that white space, but adding the negative margin removed the problem, at least in Chrome. IE 11 still has has the white space there. Normally the background-size: cover; property removes any white space, but this doesn't work with the parallax effect.

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

Here's a JSFiddle with pretty much exactly the same code as the site I'm creating.

Aucun commentaire:

Enregistrer un commentaire