Can you use css to resize and crop background images instantaneously?

Question

I have come across a problem while trying to make a background for my website. I am trying to have an image that can be scrolled and resized as seen on: https://sketchthemes.com/preview/?theme=98 . I have tried this:

<div id="back_img" style="background-image: url("test.jpg");"></div>

And then setting the style to:

#back_img {

  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

But this does not contain all of the functionalities I wished for.

Answer 1

Setting background-attachment: fixed; and background-size: cover; will bring it closer to that effect, however to get the parallax scrolling you will need to write / use a script to adjust it's position based on the current scroll.

#back_img {

  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-attachment: fixed;
  background-size: cover;
}