Moving Background Image CSS on Scroll

Sometimes, a web designer wants to create creative and mind-blowing stuff. Whether he is creating a part of the website template or a plugin he must use a parallax background effect or scrolling effect to add some creativity. Similarly, CSS animations are another source of creative assets in web designing. So, in this tutorial, we are going to build a moving background image using CSS and a little bit of jQuery.

You can implement this moving background image into your own project for various purposes. Yup! it’s just a conceptional project that can be further used in many other creative web designing projects. Before going further, I would like to explain a little bit about this “moving background image” project.

Actually, the background-attachment can be move using the pure CSS (background-attachment: scroll;), but it will move along with the foreground contents. As you have seen on the demo page, our second background (boat) image moves vertically on the scroll event. Similarly, it can be moved to any direction (top, left, right, or bottom) according to your needs. Do you know, how is it possible? well! it’s due to the jQuery window scroll function.

So, what the logic behind it? actually, we are moving a div element that contains a background image in its CSS properties. Not the background-attachment itself. Now, you may have got the actual point to move a background-image over an image. OK! let’s begin with coding to finish this interesting scrolling effect.

HTML for Moving Background Image

The HTML is very simple, we just need two div elements. One of them is the main container that contains a static background. The other div also contains a background image that we’ll move using jQuery. So, create a markup structure as follows:

<div class="section bg-static">
  <div class="bg-move"></div>
</div>

You can place any other HTML contents inside the outer div (that has the class name “section” and “bg-static”) tag.

The CSS Styles

Now we’ll define some basic CSS styles for the static section and set a background image. We kept the background-size cover and centered it. You can also use other available values for these properties as you need.

.section.bg-static {
  background-color: #85c1e9;
  background-image: url("../img/scrolling-bg.png");
  background-size: cover;
  background-position: center;
}

Similarly, we’ll define styles for the second div element. Here, we’ll keep the absolute position for this div “.bg-move” to animate it in jQuery. The other background attributes are quite similar to the above div.

.section .bg-move {
  position: absolute;
  top: 0;
  bottom: 0;
  right: auto;
  width: 100%;
  background-image: url("../img/boat.png");
  background-size: cover;
  background-position: center;
}

Move Background Image on Scroll

Finally, it’s time to animate the div using jQuery to move the background image. Before this, make sure you have loaded the jQuery (JavaScript library) into your HTML document. If you have not included it, add the following jQuery CDN link between the <head> tag of your HTML page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

In the jQuery window scroll function, we’ll get the scrolling position of the static section and apply it to the second (“.bg-move”) div. You just need to add the following JS code between the <script> tag and place it before the </body> tag. If you want to move the background image to another direction, just replace the left with (right/top/bottom) on the lin  .css({ left: leftPosition.

$(window).on("load resize scroll", function() {
  $(".bg-static").each(function() {
    var windowTop = $(window).scrollTop();
    var elementTop = $(this).offset().top;
    var leftPosition = windowTop - elementTop;
      $(this)
        .find(".bg-move")
        .css({ left: leftPosition });
  });
});

That’s all! I hope you like this image moving tutorial, if you have any questions let me know by comment below.

You May Also Like

Leave a Comment