What is the best way to set a stationary background that scrolls on a responsive webpage?

I'm working on a responsive website with alternating sections featuring fixed background images where the content is meant to scroll over the image. However, I'm facing an issue on iOS where the background image zooms into a small section and scales up to fit the content div, resulting in a grey background. How can I resolve this issue and make scrolling sections over fixed backgrounds work on iPhone browsers?

Below is the code I'm currently using for the background:

.scroll-background {
  background: url("../imgs/misc.jpeg") no-repeat top center fixed;
  background-size: cover;
}
.scroll-background2 {
  background: url("../imgs/misc2.jpeg") no-repeat top center fixed;
  background-size: cover;
}
.center{
  padding: 0 2em;
  margin: 0;
  position: relative;
  top: 50%;
}

and the html:

***EDIT I've removed all the responsive elements and narrowed down the issue to the background image scaling to the entire page instead of just the section it should be contained in, specifically on iOS browsers. For example, the background of the 'about' section scales to cover all three sections, and the magnified portion shows in the first section. Deleting the other sections resolves the sizing problem.

<body id="top">
      <section id="about">
        <div class="scroll-background center">
            <p>
              Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu.
            </p>
        </div>
      </section>

      <section id="skills">
        <div class="center">
            <p>
              Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu.
            </p>
        </div>
      </section>

      <section id="portfolio">
        <div class="scroll-background2 center">
            <p>
              Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu. 
            </p>
        </div>
      </section>
    </body>

Thanks

Answer №1

It appears that the issue is stemming from the combination of the background-attachment: fixed; and background-size: cover; properties that have been set.

Important Note: Just to clarify for anyone else reading this and wondering about the background-attachment: fixed; property mentioned in the original post... This property has actually been defined inline within the

background: ... no-repeat top center fixed;
statement. It is the final property listed at the end.

Returning to the original poster's question: It seems that iOS has a limitation that prevents the simultaneous use of background-size: cover; and background-position: fixed;. A resource on caniuse.com even references a workaround discussed in an existing Stack Overflow post.

I hope this information proves helpful :)

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 it possible to break a single word when word wrapping?

Is it possible to apply word-wrap: break-word to just one word within an element without affecting the entire element? I find that when I apply it to the entire element, it looks messy. I tried searching for a solution but couldn't find anything. Has ...

Angular dropdown tooltip for overflowing text

Here is the select element in question: <select id="select-full" title="Make selection" class="form-control form-custom input-sm" name="Select" ng-model="form.select" ng-options="select.displayName as select.text for select in selec ...

Tips for keeping my background image from shrinking when I resize the window?

When I resize the webpage window, my background image shrinks in size. Currently, it is not repeating (which is a step forward), but now I need it to cover the entire screen to avoid showing white space around the background when the window gets smaller. ...

The preventDefault() function is not functioning properly on the <a> tag

As a JavaScript beginner, I decided to create an accordion menu using JavaScript. Although I was successful in implementing it, I encountered a bug in my program. In this scenario, uppercase letters represent first-level menus while lowercase letters repr ...

Are there any special CSS hacks that only work for IE8?

When it comes to Internet Explorer 8 (IE8), my preference is to utilize the following CSS: color : green; I am looking to implement a hack that exclusively impacts IE8, without affecting IE9, IE6, and 7. ...

Issues with CSS not loading properly on EJS files within subdirectories

This is the structure of my folders (with views located in the root directory): views/contractor/auth/login.ejs When I access that file, the CSS styles are not being applied. The connection to the CSS file, which is located in the public directory in th ...

The drop-down links vanish into the depths of the webpage's body

Can someone assist with my drop-down menu issue for the link "services"? The link disappears behind the page content when I try to modify it. Any help would be appreciated, thank you! This is the CSS: .bodycontent { margin: 0 25% 0 25%; ...

Is there a more intelligent approach to incorporating Bootstrap classes (or classes from another less.css file) into my less file through inheritance?

I am trying to find a more efficient way to integrate bootstrap classes into my less file. Currently, I am doing the following, but it has the disadvantage that not every "subclass" or connected class is inherited for my own control: .BWForm_form-control ...

Sending arguments from a custom URL scheme to a webview

I am currently working on passing parameters from an IOS custom url to a webview. At this point, I have successfully integrated the webview in my main viewcontroller and created a delegate method to extract the parameters from the incoming URL. To achieve ...

Implementing a sleek show/hide transition using slideToggle in jQuery

Trying to implement show/hide content with slideToggle and it's functioning, but the animation effect on the table is not smooth. Attempted two different codes, but none provided the desired animation effect: $('.more').slideToggle(' ...

Angular functions are executed twice upon being invoked within the html file

I decided to kick-start an Angular project, and I began by creating a simple component. However, I encountered a perplexing issue. Every time I call a function in the HTML file from the TypeScript file, it runs twice. TS: import { Component, OnInit } from ...

Querying birthday and email information using the v3.1 Facebook SDK for iOS

Need assistance with creating a single FQL query using the latest Facebook SDK (v 3.1) for iOS to retrieve the birthday and email of a user's friend. Despite getting the correct value for the 'name' field, I am receiving null for the 'e ...

Customizing event colors in Full Calendar

My interactive calendar is created using : $('#calendar').fullCalendar({ height: 300, //............. events: jsonData, month: firstMonth }) I am looking to dynamically change the color of an event based on certain conditions ...

UI development in iOS using Objective C

Inside My ViewController.h file, I have included two UIView XIBs named XIB-A and XIB-B. There is a Button placed on UIView XIB-A that I am attempting to trigger the action for, but it does not seem to be responding to the IBAction... Could someone please ...

div that adjusts its max-width to always perfectly match the width of its contents

Check out this jsfiddle for more information: http://jsfiddle.net/tN6QE/2/ The CSS code we are using is as follows: div { display: inline-block; border: solid 1px black; padding: 10px; max-width: 200px; } We are dealing with two scenarios here. ...

Looking to create circular text using HTML, CSS, or JavaScript?

https://i.sstatic.net/pnu0R.png Is there a way to generate curved text in HTML5, CSS3, or JavaScript similar to the image linked above? I've experimented with transform: rotate(45deg); but that just rotates the text without curving it. Additionally, ...

Exploring elements using dynamic xpaths in selenium

When working with Selenium WebDriver, I am facing difficulties selecting the <input class="cs-autocomplete-input" tabindex=""> element due to its fluid ID. This is because there are multiple items with the same class name on the web page, making it c ...

How can I center the navbar logo and use it as a toggle for collapsing the menu?

This is a simple example of a navigation bar <nav class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class ...

Angular select automatically saves the selected option when navigating between views

I would like the selected option in my dropdown menu to stay selected as I navigate through different views and then return back. Here is the view: <select ng-model="selectedSeason" class="form-control" ng-options="season as 'Season '+ seas ...

Retrieving the headers from an ajax request

Is there a method to retrieve the complete request headers used in an AJAX call made through jQuery? ...