How can I activate the Parralax effect specifically for Laptops and Desktops?

Is there a way to activate the Parallax effect only on laptop and desktop views?

Currently, I have the following code, but it causes issues with displaying images on certain browsers like Safari.

.parallax {

/* Full height */
height: 100%; 

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

In my HTML, I am referencing this code in the specific section where I want the Parallax effect:

<section id="home" class="home parallax bg-img fix">

Answer №1

Remember to place your external style sheet at the top of your document to ensure it overrides any parallax rules you have set.

/*Mobile 480px*/
/*Desktop 992px*/
/*Huge 1280px*/

@media screen and (min-width: 480px) and (min-width: 768px), (min-width: 992px), (min-width: 1280px) {
.parralax {
   /* Ensure full height */
   height: 100%; 

   /* Implement parallax scrolling effect */
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
} 

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

Deleting a particular tag with regular expressions: a step-by-step guide

I'm attempting to remove a ul tag along with any nested tags inside it. <ul class="related"> <li><a href="/related-1.html" target="_blank">Related article</a></li> <li><a href="/related-2.html" target="_blank"&g ...

What methods can be used to adjust the dimensions of a webpage's textbox?

I've been working on a Chrome extension and I have encountered a few challenges that I need help with. One issue I'm facing is changing the size of the text box in the Facebook chat box at the right bottom corner of the page. To accomplish this ...

Refresh a row in real-time by utilizing a modal with JavaScript or jQuery

Is there a way to dynamically edit and update a previously submitted row (category name) in a table? I am able to edit a row by clicking on an edit button and displaying a modal with the current value. However, I am facing a challenge when trying to submit ...

Steps to turn off a Material UI CSS class for an element universally

Utilizing the Material UI Typography element with the css class MuiTypography-h1, I am seeking to globally disable its usage throughout the entire codebase. <Typography variant="h1" sx={{ width: '100px', height: '55px ...

What is the best way to navigate users to a different page when they click on a button?

I recently designed a button in Dreamweaver software. Could you please guide me on how to set up the button so that when clicked, it redirects the user to a different page using Dreamweaver? Below is the HTML code for the button: <input type="submit" ...

Troubleshooting: Issues with UiKit Grid, Margins, and Cover not functioning correctly when HTML content is

I'm currently utilizing uikit for a project and I've encountered an issue while loading html content into a webpage via ajax. Specifically, the page is loaded when a select option is chosen. Here's the code snippet responsible for this behav ...

Is there a way to disable dates prior to a specific start date in the Bootstrap 4 date picker?

It's important to clarify that I am familiar with setting the startDate. My current challenge lies in trying to gray out dates prior to the selected startDate and also changing the cursor on the datepicker to a pointer. Despite hearing that bootstrap ...

jQuery's :last selector allows you to target the last

I need assistance with my jQuery code $('#share_module:last').css("background-color","red"); Unfortunately, it is only affecting the first #share_module Here is an example of the HTML structure: <div id = "share_module" class = "id of the ...

Displaying current location on Google maps with generated code and adding a new marker by clicking in PHP: Firefox

I am currently working on a code that will display a marker at the current location and also add a new marker whenever the screen is touched or clicked. I have been trying to make it work with the code I found online, but it has been a bit of a challenge ...

How to align text at the top vertically and add a label using Bootstrap

Align text vertically at the top with a label in a bootstrap table cell, where the label text should wrap around. <td> <span>16/12/2018 00:00:00</span> <p class="label label-danger" style="width:100px;line-height:normal;word-wra ...

expanding the div based on the filtered content inside

My current setup involves using jQuery filters to refine the selection of products. All the products are contained within their own individual divs, which are then placed inside a single "large div". When a filter is applied, the divs containing products ...

What role do postcss-autoreset and postcss-initial play in CSS processing?

Can you explain the purpose of: PostCSS Autoreset PostCSS Initial The documentation for both plugins lacks detail and fails to clarify why they should be used and what their intended functions are. I have experimented with autoreset, which appears to a ...

What is the best way to customize bullets for individual items (li) in an HTML list (ol/ul)?

In my design, I want list items with the "ok" class to show a check mark and those with the "ko" class to display a cross mark. For testing purposes in this example, thumbs up icons are set as default: ol { padding-left: 30px; list-style: none; } ...

Trigger a sound or notification whenever a specific user sends a message on a pre-existing website

As a user of a website featuring a chat widget for communication with instructors, I have a specific request. I would like to receive an audio notification whenever the instructor sends a message, and perhaps even a browser notification if possible. It is ...

An issue has occurred: The column name 'B' is not valid. This error originated from the System.Data.SqlClient.SqlConnection

I'm currently working on developing a straightforward registration page using ASP.NET C# in Visual Studio 2013. After attempting to submit the registration details for database insertion purposes, an error occurred. The error message indicated an iss ...

Tips for incorporating tabs into a Rails 3 application with the help of Sass/Haml or CoffeeScript

Currently, I am looking to implement tabbed views in a project I am developing using Rails 3. To ensure compatibility with the latest features of Rails, I have decided to utilize Sass and CoffeeScript as my primary tools. If anyone has any resources or tu ...

Tips for adjusting the header color in materialize framework?

I've been working on a web template and I'm looking to customize the color displayed in the Android browser (maybe using JS?). The default color is blue. How can I go about changing it? https://i.sstatic.net/RxLbS.jpg Appreciate any help! ...

The CSS underline stays stationary when clicked

I'm attempting to implement a sliding horizontal line that moves on click of hyperlinks. Check out the code at: http://codepen.io/anon/pen/JdEPPb The HTML structure is as follows: * { box-sizing: border-box; } body { f ...

I'm interested in implementing a cooldown feature on my button, but I'm not quite sure how to go about

Working on a React.Js website and looking to improve the Contact Me page by adding a cooldown to the button. Unfortunately, I haven't shared all the code here but feel free to reach out on Discord: uvejs#5162 for more details. import "./contactpa ...

Utilize Jquery's "find" function to showcase an image

I am attempting to showcase an image using jQuery. I have a function that accepts ID and PATH as parameters. The ID indicates the section (each section is an HTML page that loads upon user action). Additionally, there is a text area where I am displaying t ...