Ways to consistently pause background image in CSS?

I have successfully created a slider using the Slider Revolution Wordpress plugin and am currently customizing it with CSS. I have added a small open space within the slider to display logos of the technologies that I am utilizing. Around this space, I have applied an overlay in a dark color. However, I am facing an issue where the background image keeps moving without stopping. I have attempted to add a delay but it does not seem to be working.

In simpler terms, I am looking to achieve a slider similar to the one found at .

While I have managed to create the slider, the main problem lies in the continuous movement of the background image.

Below is the CSS code for the animation (I have omitted the overlay as it was created within the plugin):

.slider_1{
background:repeat-x;
background-size:26%!important;
width:5076px!important;
animation: slide 20s linear infinite!important;
}


@keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1692px, 0, 0);
}
}

This is the current progress on my project: .

Answer №1

html {
  background-position: fixed;
}

An effective method to prevent your background position from shifting while scrolling is by using the "fixed" property.

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

Tips on narrowing the left margin of a div when the size of the contained element becomes too large

I am facing a challenge in formatting text on the web that contains equations embedded as SVG images. To address this issue, I have replaced the SVG elements with fixed-sized div in the example provided below. The SVG element is nested within a div specifi ...

Achieving Perfect Alignment in HTML Tables

I have created a simple HTML table and I am trying to center it vertically in the middle of the page based on the user's device height. So far, I have tried adding a div with 100% height and width, positioning the table at 50% from the top and left, b ...

Customizing the CSS of the TinyMCE editor within a React application

Incorporating TinyMCE 5 into my React project has been an interesting challenge. I'm looking to personalize the editor by adjusting elements like borders and adding box shadows to the toolbar. Despite attempting to add CSS through the content_css prop ...

Ways to create gaps between rows of a table

I have been attempting to replicate the layout of this table: However, I am running into an issue with the spacing between the rows (border-spacing: 0 2px), and I'm not sure why. Can anyone provide any guidance on this? This is the code I am using: ...

The issue of importing CSS files that themselves import other CSS files via URL is causing a problem

Why is this not working correctly? I have included [email protected] A.css (css file that imports from a URL) @import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin'); Ap ...

If the font size exceeds a certain value in SCSS, then apply a different value

Can SCSS handle this scenario? I am looking to set the font size to 22px in case it is greater than 30px, especially within a media query for a max width of 480px. ...

Apply this class exclusively for mobile devices

Is there a way to add the class p-5 only for mobile devices? For desktop computers: <nav class="navbar navbar-expand-lg navbar-light bg-light" style="padding:0px 10px 0px 10px;"> For mobile devices: <nav class="navbar navbar-expand-lg navbar-l ...

Is it possible to make nested HTML list items align to the left?

Is it possible to align nested HTML list items to the left? For example: Bat Cat Ratonetwothree Mat <ul> <li>Bat</li> <li>Cat</li> <li>Rat<ul><li>one</li><li>two< ...

Is there a way to modify the color of multiple disabled select fields in Internet Explorer?

After experimenting with various methods to change the color of disabled select items, I found success in Chrome but hit a roadblock in IE. Despite trying ::ms-value, the red color was applied to all disabled select fields, which was not the desired outcom ...

Creating a full-width tab card with Bootstrap-Vue: A step-by-step guide

I stumbled upon something similar in the documentation for bootstrap-vue: A card with tabs: Now, how can I style the tabs to look like this: This is my current code: <b-card no-body> <b-tabs card> <b-tab title="Tab 1" active& ...

Tips for ensuring smaller columns have the same height as their siblings

I'm facing an issue where I have a row with two columns dictating the height, but one of them is shorter than the others. How can I make the shorter column stretch to match the height of the row? This inconsistency in height is causing disruption to ...

Adjusting table dimensions according to webpage dimensions

When looking at the image below, you will notice a div that contains a table with some content. However, when resizing the web browser's page, the table goes beyond the boundaries of the div. My goal is to reduce the size of the table as it scales do ...

Struggling to align an element in HTML when used in columns?

<div class="row"> <div class="col-lg-3 " style="border: groove;"> <p class="circle col-xs-1 center-block">01</p> <h3>trending courses</h3> ...

What could be causing the TailWind CSS Toggle to malfunction on my local server?

While working on designing a sidebar for a ToDo page using Tailwind CSS, I encountered an issue with implementing a toggle button for switching between dark mode and light mode. In order to achieve this functionality, I borrowed the toggling code snippet f ...

Element sticking on scroll down and sticking on scroll up movements

I am currently working on a sticky sidebar that catches and stays fixed at a certain scroll point using JavaScript. However, I am facing an issue where I need the sidebar to catch when scrolling back up and not go further than its initial starting point. ...

What could be causing this slider to malfunction in Firefox?

I have recently developed a slider on this page: While the slider functions smoothly in Chrome, I am facing compatibility issues with Firefox. Can anyone shed some light on why this might be happening? Here is the HTML, CSS, and JS code used for the slid ...

Incorporating an HTML image into a div or table using jQuery

I am a beginner in using JQuery within Visual Studio 2013. My question is how to insert an img tag into a table or div using JQuery? For example, I have a div and I would like to generate an image dynamically using JQuery. Or, I have a dynamically create ...

Safari Mobile not rendering absolute positioning correctly

Our website www.anahatainternational.org has a functioning search section that is displaying correctly on Firefox, Chrome, and Safari browsers. However, we have encountered an issue with the mobile version of Safari where the search section appears in the ...

Are you interested in learning HTML/CSS and joining a class?

When working with HTML, you can use the TOP tag to quickly navigate to the top of a page. This got me thinking - is it possible to create a link on my webpage that will take users directly to a specific class using only HTML and CSS? I'm curious to kn ...

Is there a way for my HTML file to connect with my CSS and JavaScript files stored in an Amazon S3 Bucket?

My current project involves hosting an HTML file as a website on AWS S3 in order to circumvent the CORS Policy. However, when I uploaded all my files into a new bucket, the HTML file was able to open but without accessing the accompanying CSS and JavaScrip ...