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;
I had the same issue, when setting
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
Setting it to
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.