Fernker Fernker - 1 year ago 153
CSS Question

Background-size cover jumping when background-position switches to fixed

I am working on a Parallax/Scrolling Timeline project and I am having a problem with the CSS3 Background-size cover property.

The div has these properties:

background: url(../images/timeline/back-6.jpg) no-repeat top center black;
background-size: cover;
padding-top: 90px;
height: 1855px;
position: relative;

Using jQuery I switch the background-attachment to fixed. When I do this the background image jumps "in" (meaning that parts of the image that were past the edge of the screen are now visible). Which isn't the desired result.

In testing I can switch the div to use background-size: 100% cover but it is causing different vertical jumping issues when scrolling.

Any ideas of how to prevent it from jumping in when I switch the background to fixed? (It also happens in reverse when I set the background to scroll).

I sadly can't link to a demo of this code as the page isn't ready to be deployed yet.

Answer Source

I had the same issue, when setting background-size to cover or contain

Setting a fixed height, in example for smaller screens via @media prevents the background-image from jumping. After my tests I came to the conclusion, that the jumping is due to the orientation of the element after setting background-attachment to fixed

Setting it to fixed, the size is calculated by the size of the viewport, not the element containing the background-image. This is where the jumping comes from and why setting a fixed height or width for the background-size solves this issue.