Elevate the size of the background as you scroll

I've encountered an issue while developing a parallax website. One of the design elements involves the background size increasing as you scroll. Initially, I used a snippet solution for adjusting the background position like this:

var x = $window.scrollTop();
$('.stage.intro').css('background-size', '10' + parseInt(x / 10, 0) + '% ');

While this worked well initially, once the scroll reached the 109th percent, the background started looking distorted. How can I address this issue? Here's a demo link for reference.

jqueryhtmlcssscrollbackground-size

Answer №1

That's because when you add '10' + 10, the result is '1010', not 110. This leads to a high percentage increase from 109% to 1010%. To fix this, simply replace the string '10' with the number 100:

$('div').css('background-size', 100 + parseInt(x / 10, 0) + '% ');

Check out the JSFiddle demo.

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

Is there a way to continuously run jQuery code or reset it?

Can you help me create a loop that will continuously run this script after it finishes executing, repeating the process indefinitely? I want to keep running this code over and over again. This script is using jQuery version 3.5.1 // Title var title1 ...

javascripthtmljquerycss

I am attempting to format an HTML form with proper indentation, but it seems to be eluding me

Struggling to design a custom registration form template, I'm facing an issue where paragraph spaces or indents are not being recognized by the program, even in the preview pane. Seeking assistance with this problem. I am attempting to position this ...

html

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

At present, the current code unfolds the DIVs whenever a user clicks on a menu item. This results in the DIV folding and unfolding the same number of times if clicked repeatedly on the same link, without staying closed. My desired functionality is to have ...

javascriptjqueryhtmlcss

What is the best way to delete a parent div with jquery?

Is there a way to remove the first div and its contents only? I am struggling to delete any input on my webpage. $(document).ready(function() { var max_fields = 4; //maximum input boxes allowed //var wrapper = $(".phone-field"); // ...

javascriptjqueryhtml

Accessing HTML generated from a PHP file through AJAX

I'm currently attempting to retrieve the file content of an HTML rendering from a specific URL. Below is the code I am utilizing, which consistently results in an error: $.ajax({ type: 'POST', url: 'http://www.withhold ...

javascriptphpjqueryhtmlajax

Issues with Jquery Autocomplete feature when using an Input Box fetched through Ajax requests

When a user selects an option from the drop-down list, an input box is dynamically added to the page using AJAX. document.getElementById("input_box").innerHTML ="<input id='ProjectName'/>"; However, there seems to be an issue with jQuery ...

javascriptphpjqueryajax

Effortlessly navigating through pages without the need to refresh the page with the help of JQuery, AJAX

Looking for a way to paginate the results of my PHP select query without refreshing the page. Is there a way to achieve this? Additionally, encountering issues when trying to filter results, such as only displaying active users. Currently facing a proble ...

phpjquerymysqlajax

Animation scaling on the iPhone seems to abruptly jump away once it finishes

Encountering an issue with animations that is causing unexpected behavior on physical iPhone devices but not in the simulators. The problem arises when the background zooms in and then the div suddenly jumps to the left after the animation completes, as sh ...

cssreactjstypescriptanimationstyled-components

what is the method to adjust vertical spacing on word wrap using css?

My initial question on this forum. I've noticed that my text is being cut off because it's too long for the given space. I'm wondering if there's a way to decrease the vertical spacing between the rows using CSS? ...

css

Is there a way to pass select2 value to my Java code?

I am currently working on a Jira Plugin that utilizes Servlet and Rest technologies. The plugin is designed to display project names in a select2 list, and when a user makes a selection, the datatable will show the corresponding Issue keys and summaries. ...

jqueryajaxjira-rest-apijira-pluginjira-rest-java-api

Having trouble retrieving the text of an element using Selenium

Looking at the DOM element provided: <span class="styles__Content-rlm06o-1 ixoRjG">20.00000000</span> I am attempting to extract the value 20.00000000 using the following Python code: text = driver.find_elements_by_xpath("//*[@c ...

pythoncssseleniumselenium-webdriverxpath

div styled search form

I'm working on creating a syntax highlighted search field that changes the color, boldness, and underlining of certain items as I type. Specifically, I want the word in to become bold when typed. The current setup accomplishes this, but it causes the ...

javascriptjquery

Retrieve the postal code using Google Maps Geocoder

I'm currently utilizing Jquery UI for implementing an autocomplete search feature that looks up addresses using the Google Maps Geocoder. Upon selecting an address, it retrieves the geocode data. Below is the provided code snippet: $('#address-d ...

jquerygoogle-maps-api-3geocodinggoogle-geocoder

Determine the discounted amount with the help of jQuery

I am struggling with a jQuery calculation to apply discounts. Unfortunately, my current code is not delivering the correct results as expected. Given below is the code snippet in question: $(document).on("change keyup blur", "#chDiscount", function() { ...

javascriptjqueryonchangekeyup

The mix-blend-mode feature is not compatible with Chrome browser

I'm having an issue with the mix-blend-mode property in Chrome, as it's not functioning correctly. However, it works perfectly fine on Firefox and Safari. My goal is to achieve a cutout text effect. Thank you for any assistance! h1 { mix-blend ...

cssmix-blend-mode

Is there a way to set a background image in a section without being affected

I'm struggling to make my background image for the first section of my website touch the navigation bar. The theme of the design requires that the arm in the background image reach all the way up to the nav bar. Check out the background image here ...

cssbackground-imagenavbarpadding

Tips for waiting on image loading in canvas

My challenge involves interacting with the image loaded on a canvas. However, I am uncertain about how to handle waiting for the image to load before starting interactions with it in canvas tests. Using driver.sleep() is not a reliable solution. Here is ...

javascriptangularjshtmlcanvasselenium-webdriver

Update the text label to contain an input checkbox element within

I encountered this snippet of HTML in my form: <label class="ideal-radiocheck-label" onclick=""> <input id="pagamento_8" class="_input " type="checkbox" onclick="half(this,value);" checked="" value="980" name="pagamento[]" style="position: ab ...

javascriptjqueryhtmllabelinnerhtml

Animate.css does not function properly when loaded locally

I'm currently using a Flask server to host an HTML file for testing purposes. Within the head of this HTML file, I have linked to a locally stored animate.min.css file (<link rel="stylesheet" type="text/css" href="{{ url_fo ...

javascripthtmljquerycssanimate.css

The issue with displaying Fontawesome icons using @import in CSS-in-JS was not resolved

I recently changed how I was importing Fontawesome icons: src/App.css @import "@fortawesome/fontawesome-free/css/all.css";` After shifting the @import to CSS-in-Js using emotion: src/App.js // JS: const imports = css` @import "@fortawes ...

javascriptcssreactjsemotioncss-in-js