Parallax Scrolling with CSS Only

Parallax scrolling with CSS only?

I really like KitKat’s answer, but as Roy Prins suggested, it would be very helpful to reduce it down to the bare essentials, to see precisely what is sufficient to create this effect. I’ve done so here.

To produce a very basic parallax scroll effect, the following example is sufficient. Note that browser prefixes, fallbacks, etc. have not been addressed. CSS values marked with /* e.g. */ may be changed at the designer’s discretion.

See my forked pen here.

<html><head><style>
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  body {
    perspective: 1px; /* e.g. */
  }
  .background {
    transform:
      translateZ(-.4px)
      scale(.6)
      translateX(-104%)
      translateY(-40%)
      rotate(-5deg); /* e.g. */
  }
  .foreground {
    transform:
      translateZ(.25px)
      translateX(50%)
      scale(.75)
      rotate(2deg); /* e.g. */
  }
</style></head><body>
  <img class="background"/>
  <img class="foreground"/>
</body></html>

A minor correction to KitKat’s answer:
It seems that one doesn’t need transform-style:preserve-3d (at least in Chrome), and that the effect rather depends on the body’s overflow:auto. Remove this and the parallax fails.

Scrolling with Parallax effect with CSS

The Idea of wrapping with .parallax-wrapper is good. I just made few tweaks to it.

<div class="wrapper">
  <div class="parallax-wrapper">
   <div class="section parallax"></div>
    <div class="content">...</div>
  </div>
</div>

.wrapper { 
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.parallax {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz56_A2dNoJkPZu3nFpCRn-4NaM9oMsrl1nT0JEjWlbYtkIWg1');  
}

.content {
  background: red;
  width: 400px;
  margin: auto;
}

.parallax-wrapper{
  position: relative;
  overflow: hidden;   
}

Codepen link => https://codepen.io/moorthy-g/pen/OqwYNQ

Parallax background image scroll without using css background property

Some time ago, I built these two examples with a parralax effect very similar to what you are looking for:

this example using simple jQuery to update the position of the image and title on scroll
this example using only CSS with 3D positioning to simulate the parralax effect on the image

In any case, I don't think you need JS to size the image on load. Here is an example with your code using the jQuery code from the first pen I shared here :

$( document ).ready(function() {var $window = $(window);function scroll_elements(){  var scroll = $window.scrollTop();  var scrollLayer = scroll/1.4;    $(".project-image").css(    "-webkit-transform","translate3d(0," +  scrollLayer  + "px,0)",            "transform","translate3d(0," +  scrollLayer  + "px,0)"  );}
$window.scroll(scroll_elements);});

.project-image {  position:relative;  z-index:1;}.img-responsive {  display:block;  max-width:100%;   height:auto;  margin:0 auto;}h1, .project-description {  position:relative;  max-width:500px;  z-index:2;  background:rgba(255,255,255,.7);  margin:0 auto;  padding:10px 20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="project-details">  <div class="project-image">   <img src="http://placehold.it/350X225" class="img-responsive">  </div>    <h1>  Project Title  </h1>  <p class="project-description">  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  <br/>  <br/>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  <br/>  <br/>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  </p></div>

Parallax Scrolling with CSS Only