Dynamic Content Movement with CSS3 Background Animation

I'm currently working with the following code snippet:

Here is the CSS code being used:

@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
body {
    background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;

    animation: animatedBackground 40s linear infinite;
    -webkit-animation: animatedBackground 40s linear infinite;

}

This code snippet is intended for the following HTML structure:

<body>
<div class="innercontent">
<p>This content is moving, why?</p>
</div>
</body>

The goal is to animate a cloud background in the body of the page, but there seems to be a problem where the entire page including text "This content is moving, why?" is also scrolling. How can I go about resolving this issue?

htmlcss

Answer №1

Let me illustrate how this code works using an example:

@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area{ 
width: 560px; 
height: 400px; 
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;

animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
<html><head>
</head>
<body>
<div id="animate-area"><p>This content is moving, why?</p></div>
</body></html>

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

Adding JavaScript code to Rails erb snippets

I have a complex select block created using Rails erb, and I now need to convert it to jQuery using append. Here is the original select block: <select id="mission_reward" name="mission_reward" class="select_reward"> <option value="0"><%= ...

javascriptjqueryhtmlruby-on-rails

Is there a way to add user-input text to a .txt file in an ASP.NET MVC project?

Currently engrossed in a project involving user input from the 'categoryDescription' text box to be appended to an existing text file named 'category.txt' located in the 'app_data' folder. As a newcomer to ASP.NET MVC, I find ...

javascripthtmlasp.netasp.net-mvcmodel-view-controller

PHP extract both the HTML body content and the associated HTML tags, not just the plain text

I am new to PHP and I am attempting to extract the entire body tag from an HTML using PHP. Here is a sample of my HTML: <html> <body > <p> Example html content </p> </body> </html> I want to extract only the followi ...

javascriptphpjqueryhtml

My Tailwind CSS toggle button disappears in dark mode, why is that happening?

<button aria-label="Toggle Dark Mode" type="button" className="lg:inline-flex lg:w-40 md:w-screen p-3 h-12 w-12 order-2 md:order-3" onClick={() => setTheme(theme === 'dark' ? &ap ...

javascripthtmlreactjsnext.jstailwind-css

What could be preventing the jQuery from showing the JSON response?

I am having an issue with a jQuery script that is supposed to pull a quote from an API in JSON format and display it on the page. However, for some reason, I am unable to retrieve data from the API. Can you help me figure out what is wrong here? Thank yo ...

jqueryhtmljsonapi

Insert a page break after content for desktop browsers

Is it possible to control the display of sections on different screen sizes? I have a page that looks good on 15" laptops, but larger resolutions cause the next section to appear on the first screen. Is there a way to show the next section only on th ...

javascriptcsspage-break

Simple JS/HTML5 Canvas Problem

As someone who is just starting out with JavaScript and HTML5, I am struggling to make a simple piece of code work. I have created a canvas, added it to the body, and attempted to write text, but nothing is appearing on the screen. <!doctype html> ...

javascriptjqueryhtmlhtml5-canvas

Accordion menu causing Javascript linking problem

After following a tutorial, I managed to create an accordion menu in JavaScript. In the current setup, each main li with the class "ToggleSubmenu" acts as a category that can hide/show the sub-lis. Now, my query is this: How can I retain the link functio ...

javascriptjquerycssaccordion

Exporting Canvas data without the alpha channel

I am looking for a way to resize images that are uploaded in the browser. Currently, I am utilizing canvas to draw the image and then resize it using the result from the toDataURL method. A simplified version of the code (without the upload section) looks ...

javascripthtmlcanvasimage-resizingtodataurl

Send the data to a PHP script immediately upon the completion of the HTML page loading

I'm having trouble sending data to PHP from my HTML code. Below is the code I am using: HTML <!DOCTYPE html> <html> <title>web </title> <body> <script> $(document).ready(function() { $.post("loadWeb ...

phpjqueryhtml

Is it possible for me to create personalized color definitions that I can seamlessly use across CSS, JavaScript, and HTML files?

I'm currently using a shade of blue throughout my app, and I find myself repeatedly copying and pasting the color code in my CSS styles. Is there a way to create a constant for this specific color that can be shared across my CSS, HTML, and JavaScript ...

javascripthtmlcsscolor-scheme

Perform HTML5 constraint validation prior to form submission by utilizing ajax technology

I'm facing an issue where the standard client-side HTML validation is not being triggered by the following code snippet. How can I ensure that the standard validation is performed and the action is called if the input is valid? <h:form> <h:i ...

ajaxhtmlvalidationjsfjsf-2

Activate the built-in date picker from a web application on iOS and Android devices

Seeking to expand the horizons of running a native web-app on various platforms using HTML5. At present, an <input type="date"> element triggers the standard soft keyboard on Android and iOS devices. It is conceivable that in the future, mobile opera ...

javascriptiphoneandroidioshtml

The parameter necessary for [Route: admin.request.update] is missing. The required URI is admin/request/{request}, and the missing parameter is 'request'

When attempting to access detail.blade.php, I encountered an error stating "Missing required parameter for [Route: admin.request.update] [URI: admin/request/{request}] [Missing parameter: request]." Despite following the steps and codes exactly as in my pr ...

phphtmlcsslaravel

ASP Table generating an additional property that is incompatible with HTML5 specifications

Currently experiencing an odd issue. Working with an ASP file that generates a basic table element. The markup includes <table>. Upon rendering, it is producing <table cellpadding="0" cellspacing="0"> in the final output. Seeking to eliminat ...

asp.nethtmlvalidation

Choose from the selection of options in the select tag

In my HTML document, I am working on a feature where selecting an option from one select tag should dynamically populate another select tag with specific options based on the selection. This is the code snippet I have implemented: <script type ...

javascripthtml

JavaScript xPath is ineffective at providing a return value

Trying to work through an issue with xPath and I am new to this concept. Any guidance or assistance in JavaScript would be greatly appreciated. Here is the simple HTML document that I have: <!DOCTYPE html> <html> <head> < ...

javascripthtmlxpath

Having difficulty choosing the aria-activedescendant combobox element in Java

I am having difficulty selecting items from the unique combobox element. When I scroll down the list of items, I can see the actual value of each item (i.e. aria-activedescendant="react-select-4--option-3"). However, after selecting a specific item, the va ...

htmlseleniumcombobox

How can we create and improve the visibility of the navigation for the UIKit slider

Is there a way to keep the navigation arrows of the Uikit slider always visible or add navigation circles below the slider? Your help is greatly appreciated. ...

htmlcssgetuikit

Return to the directory from which you originated

Is there a way to eliminate duplicate forms located in different folders, which are accessible by specific groups? Ideally, I want to consolidate these into one file. Additionally, the file should be capable of identifying the folder from which the user ...

htmlhttp-redirecthref