How can I disable the Parallax effect when resizing the window?

My goal is to remove the parallax effect from the background when the screen size is reduced to that of a tablet or mobile device. I found a website with the desired effect (here), but I'm unsure how they achieved it.

I am currently using the same jquery parallax script as the website I referenced (), so theoretically, I should be able to achieve the same result.

Update: I was able to solve the issue on my own. Here is the code:

@media screen and (max-width: 480px) {
    #l-HeaderContainer{
        background-attachment: scroll !important;
        background-position: center !important;
    }
}

Answer №1

It seems like your CSS is not working properly due to its strict rules on ids.

Remember, ids should always start with a letter. Try changing your id to something like HeadContainer1, and then modify your code accordingly:

@media screen and (max-width: 480px) {
    #HeaderContainer1{
        background-attachment: scroll !important;
        background-position: center !important;
    }
}

SOURCE

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

I need help figuring out how to showcase the following object in an Angular 5 HTML file

https://i.sstatic.net/XXm3W.png The console screenshot above shows an object with two values: users and tickers, each being an array of values. How can I display these values in an Angular 5 HTML template similar to the screenshot above? I attempted to ...

Displaying the mean of data stored within an array, presented in a tabular format

Currently, I am attempting to utilize JavaScript to display the average value within a table. Below is the code that I have implemented. Within my code, I have included a for loop to iterate through the array. However, I am encountering an issue where onl ...

Passing a value from Javascript to PHP using Ajax in CakePHP 3.x results in an empty $_POST variable

Despite successfully alerting the post data with Ajax ({"booking":{"testdata":"testdata"}}), the issue arises when the PHP code fails to retrieve $_POST. Both JavaScript and PHP are present on the same page: Take a look at my code below: <script type ...

JavaScript may encounter undefined JSON data after receiving a response from the server

I am facing an issue with my PHP script that is supposed to receive a JSON array. Here is the code I am using: $(function() { $("img").click(function() { auswahl = $( this ).attr("id"); $.get('mail_filebrowser_add2.php?datenID=' + aus ...

Vite deciding to generate its own node_modules directory within the workspace rather than depending on a monorepo

I have organized a monorepo for a fullstack webapp with the directory structure outlined below: . ├── client │ ├── index.html │ ├── package.json │ ├── src │ └── vite.config.ts ├── node_modules ├── p ...

col-md-4 overlapping on smaller screens

I have a contact section on my website that contains columns. I used col-md-4 as the site is divided into 12 columns, but on mobile devices, they stack on top of each other. How are you today? https://i.sstatic.net/CdKAI.png And I'm trying to keep ...

What is the best way to attach functions to specific jQuery objects and exclude others?

Imagine having an unordered list <ul>: <ul class="products"> ... </ul> You want to use jQuery to select it and then add custom functions to that specific object. For instance, you wish to include an addProduct(productData) function ...

The unusual behavior of the :to attribute on @click in Vue

I have a specific element: Hashtag.vue: <template> <router-link :to="getTo" custom v-slot="{ navigate }"> <div role="link" @click="navigate"> {{text}}</div> </rout ...

Hide multiple divs with similar ids in JQuery when clicking outside of them

Is there a way to hide all div elements with similar id if none of them are clicked on? Currently, my code only works for the first div because I am using index[0] to retrieve the id. How can I make it work for all ids? Below is the code snippet: $(win ...

The numerical value fluctuates upon utilizing JSON.parse( )

I am currently utilizing Node/Express to send API requests to the unofficial Vine API. The data returned by the GET https://api.vineapp.com/users/search/ route undergoes changes during parsing. This is my code snippet: request({ url: 'https://api.v ...

Is it possible to retrieve the image height using jQuery before it is displayed on the webpage?

I am currently working on loading approximately 50 images from JSON data that is returned from PHP. In order to avoid making an additional call to PHP to get the image size, I would like to handle this on the client side. Is it possible to do so? Below is ...

Transmitting Data to PHP Using JQuery/AJAX

I'm struggling with this issue. Here is the HTML code that I have: <input type="text" class="studno"><input type="button" value="Check" class="chstudno"> How can I send this data to PHP using JQuery/AJAX? Below is the code that I current ...

Utilizing MongoDB's object within the mapper function in MapReduce

I have a question about querying data in MongoDB using the aggregate framework. Originally, my data was structured like this: [ { created_at: "2014-03-31T22:30:48.000Z", id: 450762158586880000, _id: "5339ec9808eb125965f2eae1" } ] Now, ...

Scrolling the inner div with the main scrollbar before navigating through the rest of the page

In my hero div, I have a container div called right-col that contains two inner divs. These inner divs are sticky, creating the effect of cards sliding up when the container div is scrolled. This is the HTML structure: <!DOCTYPE html> <html lang= ...

content organized in tabs using the fancybox feature

I am attempting to dynamically load content using AJAX with fancybox. It loads fine, but the tab won't change if I use the default function or via AJAX. However, if I use fancybox and set the type to 'iframe,' it loads and alternates tabs p ...

Navigate through the DOM to return an image

I have a question about clicking on the image '.escape' and passing back the source of the image '.myimg2' when clicked. Here is my attempt at accomplishing this task: I understand that it involves traversing the DOM, but I am not very ...

Exploring materials using a loop in Three.js

Searching for a specific material named COIN and assigning a new texture to it can be achieved by looping through the materials in an object. The goal is to find a match based on the material name, regardless of its index within the material array. object. ...

show SQL variables in a text box using PHP

So I've been working on a project that involves displaying the forename of a customer from my database in a text box. The idea is to allow users to edit customer information stored in an SQL database. However, I'm facing issues as the text box ap ...

Having difficulty retrieving AJAX POST data

I'm attempting to generate a calendar using php but I'm having trouble figuring out how to update the displayed month using ajax Within my code, I have two buttons inside a 'button' tag with values of "+1" and "-1" respectively, both w ...

Breaking down an RxJS observable sequence into various outputs

Can a single observable flux be split into multiple other observables? For example, I have a form that users can submit. The submit action is captured by an observable, and a validator is triggered upon submission. submitAction.forEach(validate) However ...