Create a Dynamic Moving Background Image with Endless Scrolling

Is it possible to make a background image animate infinitely and only move upwards without any jerkiness? I am struggling with setting it up this way. Can anyone provide guidance on achieving this?

If you need more context, here is the link to the webpage where the issue is occurring:

Below is the CSS code snippet related to the background image animation:

.et_pb_section.landing-page .et_pb_column_3_5 {
  background-color: #f6eb00;
  margin-right: 1%;
  padding: 0 10px;
  height: 100vh;
  background-image: url(images/ragazzi-logo.png);
  background-position: 0 0;
  background-size: cover;
  -webkit-animation: upward 15s linear infinite;
  animation: upward 15s linear infinite;
  border-right: 4px solid #000;
  display: block;
  background-repeat: repeat-y;
}

@-webkit-keyframes upward {
  to {
    background-position: 0 0;
  }
  from {
    background-position: 0 2174px;
  }
}

@keyframes upward {
  to {
    background-position: 0 0;
  }
  from {
    background-position: 0 2174px;
  }
}
htmlcsswordpressjquery-animatecss-animations

Answer №1

To achieve the desired effect, make sure to nest a div within another div. Here is an interactive example on JSFiddle
HTML

<div class="main">
    <div class="holder"></div>
</div>

CSS

     *{
      margin:0;
      padding:0
    }

    .main {
      height: 100vh;
      overflow: hidden;
    }

    .holder {
      height: 200vh;
      -webkit-animation: upwards 2.5s linear infinite;
      animation: upward 2.5s linear infinite;
      background: url(http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png)  center yellow;
      background-size: 100% 50%;
    }

    @-webkit-keyframes upward {
     from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
     }
    }

    @keyframes upward {
      from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
     }
    }

Answer №2

My urge to respond to this post is strong because I have experienced something similar (pun intended) and your skipping animation was causing me agony.

You'll need to play around with the pseudo :after element and make sure the height is correct. This will help you get started.

Additionally, your image isn't perfectly cropped, so fixing that will set you on the right path.

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>Test</title>
  </head>
  <body onload="onloaded()">
    <div class="foo_section">
      <div class="foo_container">
        <img class="foo_image" src="http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png" />
      </div> 
    </div>
  </body>
</html>

.foo_section {
  width: 100vw;
  height: 100vh;
  position: fixed;
  min-height: 400px;
}

.foo_container {
  width: 100%;
  position: relative;
  animation: infiniteScrollBg 10s infinite linear;
}

.foo_container:after {
  content: "";
  height: 500%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #f6eb00;
  background-image: url('http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png');
  background-size: 100% 20%;
}

.foo_image {
  width: 100%;
}

@-webkit-keyframes infiniteScrollBg {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-200%);
  }
}

Codepen

I notice you're also a fan of Elegant Themes. <3 Divi builder

Answer №3

My recommendation is to use two div elements with identical background styles. Then, apply animations to these divs and adjust their positions to create a continuous scrolling effect upwards.

.container{
  width:600px;
  height:400px;
  background-color:yellow;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}
.bg{
  width:100%;
  height:400px;
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  bottom:0;
}
.bg.bg1{
  transform: translate(0,0);
   animation: upward 3s linear infinite;
}
.bg.bg2{
  transform: translate(0,100%);
  animation: upward2 3s linear infinite;
}

@keyframes upward {
    to {
         transform: translate(0,-100%);
    }
    from {
       transform: translate(0, 0);
    }
}
@keyframes upward2 {
    to {
      transform: translate(0,0);
    }
    from {
      transform: translate(0,100%);
    }
}

You can see the implementation of this concept in action on my CodePen: my codepen.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting intricate HTML table data into JSON format with the help of jQuery

Looking to extract JSON data from selected rows in the HTML table below using jQuery. The JSON output should include any user-entered comments from the textboxes. Any guidance or suggestions would be greatly appreciated. <table id="potable_grid" class ...

jqueryhtmljsonhtml-table

Struggling to make @font-face function properly

I am attempting to incorporate a custom font into my website. In my CSS file, I have the following: body { font-family: HurmeGeometricSans4_SemiBold; } @font-face { font-family: HurmeGeometricSans4_SemiBold; src: url(resources/Hurme_Design_-_ ...

htmlcss

Positioning JQuery tooltips

I've been developing a simple tooltip tool (check out the fiddle link below), but I'm encountering some issues with positioning. My goal is to have the tooltip appear centered and above the clicked link, however right now it appears at the top le ...

javascriptjqueryhtmlcsstooltip

Obtaining two divisions that simultaneously display partials in a parallel manner

It's proving difficult to align two divs containing rendered partials side by side within a form. Strangely enough, when I replace the divs with plain text, they respond perfectly to my style changes. However, as soon as I include the render code, the ...

htmlcssruby-on-rails

Unable to maintain the height of a div at 100% as it keeps reverting back to 0px

I'm having trouble setting the height of the individual parent columns (and their children) to 100% because for some reason, the div height keeps resetting to 0. The first column contains two child boxes that should each take up 50% of the page heigh ...

htmlcss

Is there a way to use jQuery to focus the cursor on a specific field in a form?

In my form, the first field is a dropdown with options such as "student" and "employee". Below that, there are two text fields for "college name" and "company name". If a person selects "student", then the "college name" text box should be enabled and t ...

jqueryhtmlcursor

Struggling with React integration of AdminLTE3 sidebar treeview?

I have a requirement to create a React sidebar with a category 'Staff' that, when clicked, reveals three subordinate categories. Below is the code snippet: import React, { Component } from "react"; export default class Sidebar extends Componen ...

javascripthtmlreactjsbootstrap-4adminlte

Retrieve the value of the nested list item along with the value of its parent unordered list in a JSON format by

Having trouble getting the correct values for my unordered list and li elements within it. I have tried multiple resources, such as: http://jsfiddle.net/mohammadwali/tkhb5/ how-do-i-convert-the-items-of-an-li-into-a-json-object-using-jquery jquery-tree- ...

jqueryhtmljson

What is the best way to encode and split audio files so that there are no gaps or audio pops between segments when I put them back together?

In my current project, I'm developing a web application that involves streaming and synchronization of multiple audio files. To accomplish this, I am utilizing the Web Audio API in conjunction with HTML5 audio tags to ensure precise timing of the audi ...

htmlnode.jsffmpegaudio-streamingweb-audio-api

I am struggling to extract data from the webpage using xpath

I'm currently delving into the realm of web scraping by working on various projects. One project involves creating a database of items from an online shoe store. However, I seem to be facing issues with extracting the data in text form. Here's w ...

pythonhtmlseleniumweb-scraping

What exactly is the significance of localizing an Aria label?

Looking to add an aria label that needs to be localized. What exactly does this mean? Here is the code I have: <a href="link"><i class="button" aria-label="back button"> How do I modify this code in order to make ...

htmllocalizationaccessibilitywai-aria

Is it possible to include an onclick event in a hyperlink tag to initiate an ajax call

I am looking to incorporate an ajax call within a hyperlink tag "a". The purpose of this ajax call is to send some information to the server without expecting any return value. I attempted the following approach: document.querySelector("#myId").onclic ...

javascripthtmlajaxhyperlink

Having trouble with jQuery modal not adjusting its height properly

I am a jquery modal popup newcomer. I can open the modal when clicking on the hyperlink, but I'm having trouble with the height setting. Despite my attempts and searches online, I couldn't figure it out. When trying to post a question about the & ...

javascriptjqueryhtml

What is the best way to create a horizontally scrolling row of squares in a mobile view using html and css?

Below is a screenshot that I have replicated in the code snippet. The code snippet contains a parent div with two rows mentioned: <div class="product-all-contents"> <div class="product-contents"> </div> <div class="product-contents" ...

htmlcssresponsive-designmedia-querieshorizontal-scrolling

Jquery loader for loading html and php files

My html and php pages contain a significant amount of data which causes them to take a few extra seconds to load from the server. I was wondering if there is a way to implement a "loader animation" for these pages using jquery. The idea is for the loader a ...

phpjqueryhtmlcss

HTML forms default values preset

I need help with pre-setting the values of a dropdown menu and text box in an HTML form for my iPhone app. When the user taps a button, it opens a webview and I want to preset the dropdown menu and text field. Can someone guide me on how to achieve this? ...

javascripthtmliphone

Can we incorporate <a> tags in XML as we do in HTML?

Currently, I am honing my XML skills. I am planning to incorporate the <a> tag within the XML file in order to create a hyperlink to another webpage. ...

htmlcssxml

Saving the form data of a user into the Django models database

I have successfully implemented the login, authentication, and logout system. The next step is to incorporate a post functionality that saves data in the Tweet model. views.py from .models import NameForm from django.shortcuts import render, redirect, get ...

pythonhtmldjango

The font rendering in Safari appears to have distinct differences compared to other web browsers

My concern is related to the HTML tag below: <a href="/partner-team/team" class="button button__style--1">MEHR</a> This is how the CSS appears: a { text-decoration: none; } .button { padding: 0.2rem 4rem; curso ...

htmlcssbrowsercross-browser

Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?

I'm excited to ask my first question here as a beginner. I am truly grateful for all the assistance and guidance I have received from this site. I hope that the questions I ask can also benefit others in some way :) Although imagemaps may not be used ...

csstwitter-bootstraptwitter-bootstrap-3imagemap