Parallax Effect in CSS Background

I am currently working on my website at and have implemented a "parallax-bg" class to create a parallax background effect.

Interestingly, the parallax effect is working flawlessly for the hero section at the top and the texture in the middle, but it's not functioning as expected for the contact section located at the bottom of the page.

The jQuery function I am using to achieve this effect is:

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('.parallax-bg').css('background-position', 'center ' + ((scrolledY) - 70) + 'px');
});

Additionally, the CSS styling specifically for the contact form section is:

section#contact{
    background: linear-gradient(to bottom, rgba(0,0,0, 0.65) 0%,rgba(0,0,0, 0.65) 100%), url(https://www.shivampaw.com/images/bg-contact.jpg) no-repeat center -70px;
    background-size: cover;
    background-attachment: scroll;
    color: white;
}

As for the hero section, the CSS code is as follows:

section#hero{
    background: linear-gradient(to bottom, rgba(0,0,0, 0.65) 0%,rgba(0,0,0, 0.65) 100%), url(https://www.shivampaw.com/images/top-bg.jpg) no-repeat center -70px;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
    color: white;
    font-weight: bold;
    padding-bottom: 50px;
}

If anyone has any insights into why the parallax effect is not working as intended for the contact section, please let me know!

Thank you

Update: The term "parallax" refers to a fixed background effect which I have implemented using jQuery to ensure compatibility with mobile devices as well.

jqueryhtmlcssparallax

Answer №1

To resolve the issue, I made a modification to my jQuery code as shown below:

$(window).on('scroll resize load',function(){
    // 500px
    var scrolledY = $(window).scrollTop();
    $('.parallax-bg').each(function(){
        $obj = $(this);
        var pixelsY = $obj.data("position");
        $obj.css('background-position', 'center ' + ((scrolledY) + pixelsY) + 'px');
    });
});

I also included a data attribute named "position" in the relevant HTML element where the class parallax-bg is utilized. This value indicated the desired background position y offset, effectively resolving the issue.

In addition, I eliminated the no-repeat declaration from the CSS styles.

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

Are there any better methods for creating div backgrounds and borders using CSS?

Within my application, there exists a multitude of div elements that share identical backgrounds and borders but vary in size. Having to utilize the same background image for each individual div proves to be highly inefficient, particularly in terms of ba ...

htmlcss

Different method for adding child elements to the DOM

When creating a DOM element, I am following this process: var imgEle = document.createElement('img');     imgEle.src = imgURL;             x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...

javascripthtmlcssdomappendchild

CSS PopUp positioning

Can anyone help me with applying the position top and bottom of header to the NewUser div? I've tried but it's not working. How can I add !important; to the CSS? Maybe something like $("header")!important} <div id="divNewUser" class="CreateUs ...

jqueryhtmlcss

Not compatible with certain browsers, scrollable wrapper in fullscreen

I am looking to create a unique layout with a fullscreen div on top of a footer. The main element (#wrapper) should have a fullscreen background image and be scrollable to reveal the footer underneath. Check out my code on JSFiddle: https://jsfiddle.net/t ...

htmlcss

The Bootstrap Navbar is causing the navigation bar to span across two lines

I'm having an issue with my navbar taking up two lines on desktop resolution, but fitting perfectly on mobile. I've spent hours going through the code with no success. Any help would be greatly appreciated. The HTML code is provided below. <! ...

javascriptjqueryhtmlcsstwitter-bootstrap

Looking to personalize the appearance of an iframe using CSS styling?

I am working with an iframe that generates a form, and I would like to customize the CSS of this form. How can I go about editing the CSS? <div class="quiz-container" style="text-align: center;" data-quiz="#######" data-pr ...

javascripthtmljquerycssiframe

Form containing unchecked checkbox

I am trying to send a false value via post for a checkbox that is not checked by default. Here is how my checkbox is defined: <label><input type="checkbox" id="rez" name="rezerwowanie" value="false" />Rezerwowanie</label> After submitti ...

phphtmlcheckbox

Improving the efficiency of CSS animations

Is it possible to improve the performance of CSS animation by preventing it from running when the animated object is not visible on the viewport? Thank you! ...

csscss-animations

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Having trouble with an issue. Let me explain. I implemented a scrollTop Jquery on page load that scrolls down after a delay to prompt user action. However, I'm facing a problem where another scrollTop doesn't work after clicking buttons "#b3,#b3 ...

javascriptjqueryhtmlcss

Is it feasible to unload modules in Node.js once they have been loaded?

app.post('/userlogin',function(req,res){ var Module1=require('./lib/module1'); app.use(Module1); var Module2=require('./lib/module2'); app.use(Module2); }); Is it possible to unload or destroy the modules after they ...

jquerynode.jsnpm

Are there any plugins available that can create a Ken Burns effect using JQuery?

All I need is a straightforward plugin, not one for creating slideshows. In this case, I only have 1 div and 1 image. The goal is to have the image animate within the div, shifting left/right or up/down without any white space visible. The size of the ima ...

javascriptjquerycssimagetemplates

What is the process for sorting non-integer records in MySql?

I need help sorting MySQL records in descending order to retrieve the most recent entry. Here are the records stored as strings: 1/2017 1/2018 2/2017 2/2018 3/2017 I specifically want to retrieve the value 1/2018. The entries correspond to each year an ...

phphtmlmysqlphpmyadmin

Leveraging JQuery for activating an event with Bootstrap Scrollspy

I'm facing a challenge in capturing the Scrollspy event to execute a specific function. The Scrollspy feature is functioning correctly in terms of updating the active link on the navbar. However, I am struggling to capture the event for use in other p ...

javascriptjqueryhtmltwitter-bootstrap-4

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

javascripthtmlcss

Unleashing the power of React: Integrating raw HTML <a href> tags with JavaScript

I am currently working on a small web app that mimics browsing WikiPedia by fetching raw HTML content of WikiPedia articles through its API. I then display this HTML in my app using "dangerouslySetInnerHTML". I am faced with the challenge of enabling a us ...

javascripthtmlreactjsdom

Leverage the power of jQuery datetime picker in an ASP.NET content page with a repeater control

Can anyone help me with adding a javascript tag to a content page of my asp.net application? The script is working fine with html tags, but it's not functioning properly within the content. Here is the code snippet that displays a datetime picker: &l ...

javascriptc#jquerysqlasp.net

When using ContentEditable in Firefox, it generates double line breaks instead of a single one

Noticed an interesting issue with div contenteditable where Firefox is interpreting 1 newline as 2 newlines. Is this a bug or am I overlooking something? Test it out in the example below by typing: Hello World within the contenteditable. When accessi ...

htmlfirefoxcontenteditable

Using CSS to select a specific class within an attribute

Having trouble targeting a specific navigation item in a div using an attribute value in CSS. Here's the code I have so far: My goal is to target the navDepts class. HTML <div class="primary-nav" data-name="about"> <div class="sub ...

css

Add numerous submit buttons within a form. Upon clicking on a button, the form should be submitted to a specific URL using AJAX

I have a form with two submit buttons: one labeled as "SUBMIT" and the other as "SCHEDULE NEXT ROUND". When a user clicks on the "SUBMIT" button, the form values should be stored in the database and redirect to the view page. If they click on the "SCHEDULE ...

javascriptjqueryajaxcodeigniter

C# variable value not being retrieved by jQuery

When I implemented the jQuery scripts in my .aspx file, everything worked perfectly. Here is the code snippet: $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C+ ...

c#javascriptjqueryasp.netasp.net-ajax