Parallax background image that isn't exactly fixed

Question

I am trying to create a subtle parallax effect on a background image inside a div. I have used the following markup and CSS..

HTML

<div class="widget bg-parallax" style="background-image: url(~~set dynamically~~)"></div>

CSS

.widget {
    height:500px;
    position: relative;
}
.bg-parallax {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

But this creates a background image that is fully stationary as the page scroll.

I would like for the background to scroll but at a much slower rate than the page.

Is this achievable with pure CSS? If not, can anyone point me in the right direction with JS/jQuery.

Answer 1

看看w3schools.com上的这段代码，你的代码略有不同http://www.w3schools.com/howto/howto_css_parallax.asp

Answer 2

There are a couple ways you can do this. Yes, it is achievable with pure CSS.

.forefront-element {
 -webkit-transform: translateZ(999px) scale(.7);
transform: translateZ(999px) scale(.7);
z-index: 1;
 }

 .base-element {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
 }

.background-element {
-webkit-transform: translateZ(-999px) scale(2);
transform: translateZ(-999px) scale(2);
z-index: 3;
 }

This controls the height. The negative Z values make it go slower when scrolling.