The Parallax effect functions properly on web browsers, but fails to work on mobile devices

I recently incorporated a parallax effect into the image gallery section of my website. While everything seems to be functioning perfectly in standard desktop and responsive modes on various browsers, I have encountered an issue when attempting to view the same section on my iPhone 6. On mobile, the background within the section fails to stay fixed and instead stretches across the entire content area, resulting in a heavily zoomed-in and pixelated background.

Here is the HTML code for this particular section:

<section id="projects">
    <div class="parallax">
        <div class="container" style="padding-bottom: 30px;">
            <div class="row">
                <h3 class="section-header-inverse wow fadeInUp" data-wow-delay="200ms" data-wow-duration="500ms">Our Projects</h3>
            </div>
            <div class="row">
                <div class="container">
                    <div class="gallery">
                        <div class="row">
                            <div class="container">
                                // Rest of the HTML code goes here
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

This is the CSS styling applied to this section:

#projects {
    text-align: center;
    padding-bottom: 2%;
}

.parallax {
    background-image: url('../images/backgrounds/bg.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
// More CSS styles go here

Despite my attempts to add vendor prefixes to the properties, the issue persists. I would greatly appreciate any assistance or guidance in resolving this issue and ensuring that the parallax effect functions correctly as intended.

You can access the website here.

htmlcss

Answer №1

Here is an illustration that functions well on all devices such as iPhones, iPads, Androids, and Windows. The approach used here is unique.

<!DOCTYPE html>
<html>
<head>
<title>Parallax</title>
</head>

<style>
.section-one {
position:relative;
height:662px;
}

.section-one:before {
content:'';
background:blue url('2.jpg') no-repeat;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
}
</style>

<body>
<section class="section-one"></section>
</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

Problem with Layering in Javascript Canvas Game using Kinetic JS

Currently, I am attempting to replicate the game found at and delving into html5 canvas and kineticJS for my study. Here is the link to my fiddle: http://jsfiddle.net/2WRwY/7/ The issues I am facing are as follows: The tail part of the player in the f ...

javascriptjqueryhtmlhtml5-canvaskineticjs

Activate video in Slick Slider with the click of a button

I am facing an issue with my slider setup, where each slide contains a video as the background along with play/pause buttons. When I try to play the video by clicking the corresponding button on a specific slide, I encounter this problem: if I click the pl ...

javascriptjqueryhtmlvideoslick.js

Selecting specific elements based on their position within a parent element using

I can't seem to figure out the strange behavior of the nth-child selector. After calling the function BackColor1(), my visual appears different than expected: Something seems off. However, when I call BackColor2(), everything looks normal again. Co ...

jquerycss

Chrome clipping positioned spans

Having trouble positioning a label above inline sections with spans in Chrome, as the labels are getting clipped oddly. Check out these screenshots: Firefox view: Chrome view: In the Chrome screenshot, you can see that the labels are being cut off based ...

htmlcssgoogle-chromewebkit

Pop-up - maintain the initial value

I'm working on a modal using Bootstrap and React. Inside the modal, there's a dropdown with an initial empty option: <select class="form-control" onChange={this.handleSelectCat}> <option disabled selected></option> < ...

javascripthtmltwitter-bootstrapreactjsbootstrap-modal

Is it considered acceptable to include a stylesheet inside the <body> element?

When dividing my web pages into sections, such as headers and content, I find it challenging to avoid placing links to external stylesheets within the <body> tags. I prefer not to combine all styles into one large file or include all stylesheets in ...

htmlcss

What is the best way to merge two JSON values with the help of jQuery?

Two JSON Objects are provided below: The first one is: [{ "id": 5001, "count": "0", "type": "None" }, { "id": 5002, "count": "0", "type": "Glazed" }, { "id": 5005, "count": "0", "type": "Sugar" }, { "id": 5003, ...

jqueryjsonhtml

Steps for adding a user-glyphicon within an img tag

In the given code, I am trying to create a function where if no photo is uploaded, a default bootstrap glyphicon-user image should be displayed. Once a photo is uploaded, it should overwrite the default image. //Please ensure necessary Bootstrap files are ...

htmlcsstwitter-bootstrap

PHP combined with jQTouch

I have a form on an HTML page that is passed to a PHP script. The PHP works fine, but I am facing some issues in displaying the HTML content on the PHP page. When I use <?php echo $message; ?> in the body of the HTML, the variable displays properly. ...

phphtmlformssession-variablesjqtouch

Customize the appearance of HTML5 input types when validation is unsuccessful

Hey everyone I have a question: Is there a CSS trick to style the red border (or shadow) of input fields that have not been validated, such as email inputs? If my explanation isn't clear enough, I'm referring to changing the color of this eleme ...

csshtmlstyling

Why is Python BeautifulSoup's findAll function not returning all the elements in the web page

I am attempting to retrieve information from the following URL . Displayed below is the code I have developed. import requests from bs4 import BeautifulSoup url_str = 'https://99airdrops.com/page/1/' page = requests.get(url_str, headers={&apo ...

pythonhtmlbeautifulsoup

Is it possible to delete an element from an HTML form?

I'm facing an issue with removing an element from my HTML form during the loading process. The specific element in question is as follows: <input type="hidden" name="testToken" value="1000ad"></input> Here's what I've tried so ...

javascriptjqueryhtml

Is there a way to adjust the width and create the illusion that the div is sliding in from off screen?

I successfully animated a side navigation menu to slide in from the left of the screen. The animation is working perfectly, however, I had to set the div's width to 0px in order for it to appear as though it's sliding in from off-screen. If I ch ...

jqueryhtmlcssjquery-animate

Accessing an element by its ID with the help of a looping

Looking to retrieve a string from my database and insert it into my paragraphs: <p id="q_1"></p> <p id="q_2"></p> The following code works correctly: $.get("bewertung/get/1", function (data) { document.getElementById("q_1") ...

javascriptjqueryhtmlnode.jsexpress

What is the best way to adjust the size of a toggle button

My HTML page is equipped with a toggle button that has its own CSS properties, but I am facing an issue where the size and length of the toggle button are not aligning with the initial position set. https://i.sstatic.net/HVFY8.png Upon toggling the butto ...

htmlcssanimationcss-transitionstoggle

Making sure that a footer div is consistently positioned at the bottom of the container div, regardless of the dimensions of the other elements

I am facing a challenge with a container div which has child elements. <div class='wrapper'> <div class='content'></div> <div class='footer'></div> </div> The height o ...

htmlcssfooter

manipulating child element's innerHTML with javascript

Is there a way to change my icon from expand_more to expand_less in the code below? <li class="dropdown-bt" onclick="dropdown('content');"> <a>dropdown-content <i class="material-icons">expand_more</i></a> </ ...

javascripthtmlcss

problem arises when I attempt to use the code individually, as well as when I incorporate it into my existing

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>App Title</title> <!-- Framework's CSS Fil ...

jqueryhtml

Currently, my goal is to place a div underneath two other divs. Here is the code snippet that I am working

I am attempting to position the div with id 4 so that it appears after the divs with ids 2 and 3, which are placed next to each other. However, when I try to do this, I notice that the div with id 4 seems to start from the top itself. Even though the con ...

htmlcss

Eliminate Bootstrap's validation glyphs

Issue Description I am attempting to eliminate the validation icons from Bootstrap, such as the "x" and "check" symbols. Despite my efforts to search thoroughly, I have been unable to locate where these icons are located in the code. Code Sample You can ...

javascripthtmlcssbootstrap-4