Keep Background Image Fixed During Scroll Using CSS

Keep background image fixed during scroll using css

background-attachment: fixed;

http://www.w3.org/TR/CSS21/colors.html#background-properties

How to make background image stay while text scrolls? (Safari)

You can't keep the background on the actual body in this case because of the Safari attachment-fixed problem as you point out.

You can however put the background on a pseudo element and then use the 'ordinary' CSS fixed position so it stays in place even as you scroll down.

Here's a basic example:

body {
  width: 100vw;
  height: 200vh;
  margin: 0;
  padding: 0;
}

body::before {
  content: '';
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: url("https://hdwallsource.com/img/2014/5/green-background-21874-22427-hd-wallpapers.jpg");
  background-size: cover;
  z-index: -1; /* added */
}

How to scroll content without moving ` body ` background

change position: absolute; to position: fixed; for your pseudo-elements. That will align the background to the top of the viewport instead of the body document.

body {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: #091921;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e91e63, #ffc107);
  clip-path: circle(22% at 30% 20%);
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#ffffff, #da00ff);
  clip-path: circle(20% at 70% 90%);
  z-index: -1;
}

.container {
  margin: 50px 0;
  width: 60%;
  padding: 20px 40px;
  background-color: rgba(255, 355, 255, 0.2);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <h1>Lorem ipsum dolor sit.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis vero placeat dicta reprehenderit quam soluta, nisi suscipit molestias voluptatibus itaque autem similique, quo ullam sint. Mollitia magnam quos rem veniam sit, nulla repellat
      ab saepe fugit, numquam necessitatibus vel qui consequatur unde autem cum repellendus dolorum harum veritatis dolor et natus perferendis dolore culpa. Nostrum veritatis accusamus molestias porro sint veniam officia! Harum eaque corporis aperiam
      nobis ea vitae animi consectetur libero sed nisi repellendus voluptatum illum voluptate veniam quisquam ullam, assumenda rerum tempora et ducimus, quod nam officia. Velit, dolores molestiae error laudantium minus consectetur natus vero ducimus esse
      voluptatibus delectus nam dolore tempore expedita ad pariatur repellendus rerum fugiat recusandae unde iste omnis repellat. Vero eos ex dolorum explicabo eum placeat rem, unde nobis id veritatis molestias harum beatae enim, obcaecati sed, provident
      iusto error minus quis? Tenetur aliquid ipsa illo tempora odio ab. Doloremque laudantium, officia accusantium non autem blanditiis incidunt alias. Debitis at ullam esse nihil! Est, hic quasi! Voluptas rem mollitia dolorum accusamus ipsa non ipsam
      odit quis debitis quasi aliquid tempore vel totam porro possimus ullam inventore sunt, in accusantium, maiores natus. Magnam, aut quaerat alias beatae commodi eum autem repellat accusamus esse in corrupti amet maiores dolorem maxime exercitationem
      omnis totam natus adipisci suscipit. Rerum maiores, nobis eligendi repudiandae doloremque mollitia deserunt praesentium expedita, odio fugiat quae quas. Laboriosam eaque rem praesentium quam vero fugit debitis, odio sed ad. Doloribus quod saepe
      nisi earum sapiente tempore expedita modi perspiciatis cum aut vitae, consequatur, eveniet ducimus totam quis amet, quam beatae? Harum corrupti iure odio perferendis corporis totam eos id autem neque, aut vero at repudiandae soluta quibusdam dolor,
      laborum molestias! Excepturi necessitatibus, incidunt saepe id voluptatibus sapiente mollitia, similique nulla in earum dignissimos porro quis beatae, molestiae recusandae eveniet minus cupiditate tempora! Error quo eum qui fugit itaque accusantium
      non ullam saepe sunt incidunt quidem quaerat ea eius doloribus possimus totam, tenetur quis mollitia. Porro, cumque vero modi quo architecto ullam commodi aspernatur repudiandae ipsum sunt dolorem neque fugiat vitae a ex nihil vel tenetur laborum
      eligendi aut rem. Magnam quidem soluta vero amet expedita. Officiis, laborum eveniet. Nobis, reiciendis natus! Optio, delectus! Voluptates, unde aliquid fuga odio perferendis at nemo qui quidem velit ullam tempora accusantium, molestias voluptatibus
      ratione libero laudantium illo, aperiam dolorum earum exercitationem quae neque voluptate! Nihil explicabo sed sequi provident neque repellat quia quasi, doloremque tempore repellendus.</p>
  </div>
</body>

</html>

How to keep background image on bottom left even scrolling

You're setting the background on both the HTML & BODY elements.

The code looks good, background-attachment: fixed is what you need.

So in shorthand CSS, just write

body {
    background: url(backgroundBottom.png) bottom left no-repeat fixed;
}

How to have text stay fixed with background image while scrolling?

You need to make position relative of your #overview. and set a background color. that means.

#overview {background-color: #fff;position: relative}

remove z-index: -1 from header .intro-text
Also I have created a pen for you. You can take a look on there.

http://codepen.io/bizedkhan/pen/eWpOaW

Stop fixed background image from scrolling at a certain height

You have to insert content & your sidebar navigation into a container and set content's position to relative. You can use stickem plugin to help with the scrolling. An example is as follows :

HTML -

<div class="container">
<div class="row stickem-container">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <div class="aside stickem">
      I'm gonna be sticky!
    </div>
</div>

CSS -

.stickem-container {
 position: relative;
}

.stickit {
margin-left: 660px;
position: fixed;
top: 0;
}

.stickit-end {
bottom: 40px;
position: absolute;
right: 0;
}

Javascript -

    <script src="jquery.js"></script>
<script src="jquery.stickem.js"></script>
<script>
    $(document).ready(function () {
        $('.wrapper').stickem();
    });
</script>

How to use image:fixed, z-index and scroll-over effects

It is very easy, you can achieve this by applying following properties to your class , say .parrallax.

.parallax {
  background-image: url("PATH_OF_IMAGE");
  background-attachment: fixed;
  background-size: 100% 40%;
  height: 300px;
}

Here is working demo -

.parallax {  background-image: url(https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375);  background-attachment: fixed;  background-size: 100% 40%;  height: 300px;}
.diffImg {  background-image: url('https://images.unsplash.com/photo-1449452198679-05c7fd30f416?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375');}

<div class="parallax"></div><p>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 class="parallax diffImg"></div>

Keep Background Image Fixed During Scroll Using CSS