Customizing background size for iOS devices

This morning, I delved into research on a particular issue. Currently, I am crafting a single-page website that heavily relies on images. While Safari is usually criticized for its quirky handling of background-attachment:fixed, it seems to be working fine in my case; however, I have encountered an obstacle with background-size:cover when used alongside fixed.

I have designed 5 pages, all of which are set to either height or min-height of 100%. The last page has been defined as fixed in the following manner:

#div5 {
  height:100%;
  width:100%;
  position: relative;
  background-image: url("img/background.jpg");
  background-attachment:fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

In iOS (both Chrome and Safari), the background image stretches to cover the entire webpage, resulting in significant distortion.

Conversely, page 4 features the following CSS properties:

#div4 {
  min-height:100%;
  width:100%;
  background:url(img/portfoliobg.jpg);
  overflow: auto;
  background-size: cover;
}

Interestingly, this setup works flawlessly.

The amalgamation of fixed and cover seems to trigger peculiar behavior from the browser. Does anyone happen to have a solution for this conundrum?

htmlioscssbackground-image

Answer №1

Try using a separate div with position:fixed to create a fixed background effect.

Here's an example: http://example.com/unique-link

JADE

.fixed
  .bgcover

SCSS

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  .bgcover {
      background-image: url('http://unique-background.com/image.jpg');
      background-size: cover;
    width: 100%;
    height: 100%;
  }
}

I hope this information is helpful.

Answer №2

Unfortunately, at this moment in time, it is not possible to achieve the desired effect.

One potential workaround is to experiment with the 

@media screen and (max-width: 1024px) {}
rule. However, due to the higher resolution of iPad Pro screens compared to standard monitors, this may not produce the desired outcome.

As a temporary solution, you can disable fixed attachment for mobile devices using the following method:

Main CSS file:

.parallax {
   background-attachment: fixed;
   background-size: cover;
}

Main HTML

<script type="text/javascript">
   if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android|Silk)/gi)) {
      document.write("<link rel=\"stylesheet\" href=\"fixparallax.css\" />");
   }
</script>

Additional fixparallax.css

.parallax {
   background-attachment: scroll !important;
}

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

Tips for obtaining the dynamically loaded HTML content of a webpage

I am currently attempting to extract content from a website. Despite successfully obtaining the HTML of the main page using nodejs, I have encountered a challenge due to dynamic generation of the page. It seems that resources are being requested from exter ...

javascripthtmlnode.jsphantomjs

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?

Can the <v-toolbar-title> be fixed within a <v-navigation-drawer>? <v-card class="d-inline-block elevation-12"> <v-navigation-drawer hide-overlay permanent stateless height="440" value="true"> <v-toolbar color="whi ...

javascriptcssvue.jsvuetify.js

Ways to interact with a button that toggles between states

I am working with a button that has both an enabled and disabled state. Enabled State: <button type="button" class="btt-download-csv site-toolbar-menu-button icon-download no-icon-margins ng-isolate-scope" title="Download CSV" rc-download-csv="" curren ...

pythoncssselenium

Issues with Bootstrap's center-block functionality

I'm having trouble centering the navigation in my WordPress template that uses Bootstrap. I've tried using the center-block class on different elements, but the menu items are still aligning to the left. I even created a custom class in my custom ...

htmlcsswordpresstwitter-bootstrap

A custom class that uses toggleClass() does not trigger an alert upon a click event

I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class. Here is th ...

javascriptjqueryhtmlcss

Please submit the form to log in with your credentials

Here is the HTML code snippet for a form where users can enter their username and password to log in: <form Name ="form1" Method ="POST" ACTION = "userlogin.php" id="form1"> <div id="main_body" class="full-width"> <label>User ...

javascriptphphtmlajax

Determining the top element displayed in a div: A guide

Looking for an answer on how to determine the top visible element while scrolling? You may find some insights in this post: (Check if element is visible after scrolling). My scenario is slightly different - I have a scrollable div containing multiple ele ...

javascriptjquerycssangularjs

Arranging a div's position in relation to an unrelated div

I need to position a div element called "a" below another div element known as "b". The HTML code has the following structure: <div id="a"></div> <form> <div id="b"></div> <div id="c"></div> </form> U ...

css

Selecting multiple items from a grid using the Ionic framework

I am looking to create a grid of category images in Ionic framework, where users can select multiple categories and send their values to the controller. However, I'm unsure about how to make this happen with Ionic framework. Below is the view I curre ...

htmlcssangularjsionic-frameworkmultiple-select

What is the process for eliminating the message "Hello Member" on the Woocommerce Checkout page?

I've been struggling to remove a certain area on the checkout page without success. I attempted using this CSS code: .avada-myaccount-user-column .username { display:none; } https://i.stack.imgur.com/okFg9.png https://i.stack.imgur.com/GisRQ.png Cu ...

csswordpresswoocommercestylescheckout

How to Create Smooth Transitions for Text Arrays using jQuery's Fade In and Fade Out Features

I need to loop through an array of text and apply jQuery's fadeIn and fadeOut functions to each element. var greetings = ["hi, I'm", "bonjour, je m'appelle", "hallo, ich heiße"] The HTML structure I want is as follows: <h2><span ...

javascriptjqueryhtmlcssfadein

Implementing image change on dropdown selection using jQuery click event

I'm new to Jquery and JavaScript. I have a dropdown in my Keen template that displays 2 flags. I want to be able to click on the dropdown and select the corresponding flag. Most of the examples I found online use the select and options tags, but my co ...

javascriptjqueryhtml

Unable to manipulate or customize the V-slot component

I recently implemented the v-flip feature on my Nuxt webpage, resulting in the following template: <div class="about__cards"> <vue-flip class="about__single-card" active-click width = "350px" height="450px"> <template v-slot:front> ...

cssvue.jsnuxt.jsv-slot

The feature of option display is not supported on Safari browser

I am facing an issue with the functionality of two dropdown menus. The options in the second dropdown are supposed to be shown based on the selection made in the first dropdown. While this feature works perfectly in Chrome, it seems to be malfunctioning i ...

javascriptjqueryhtmlcsssafari

What is the best way to include a select HTML element as an argument in an onSubmit form function call?

I am currently facing an issue where I am attempting to pass HTML elements of a form through the submit function as parameters. I have been able to successfully retrieve the nameInput element using #nameInput, but when trying to access the select element ( ...

htmlangulartypescriptformsangular-reactive-forms

Creating a CSS key animation for resizing an image: What is the correct way to make an image expand and contract

Check out this CSS key animation example: http://jsfiddle.net/ryurage/Q2ELp/ I'm attempting to make an image grow and occupy most of the window when triggered by user interaction like hovering or click-and-hold. Subsequently, I want the image to shr ...

jquerycsscss-animations

Showing a numerical value in the bottom-right corner alongside a backdrop of an image

I am attempting to create a container that measures 26x26 pixels and showcases a number at the bottom right corner of this container. Furthermore, I want to include a 24x24 picture as the background of the container. The code I have written so far is disp ...

htmlcss

The Jquery script seems to be malfunctioning on one specific page while working perfectly fine on

I received a jQuery script from a foreign web page that I'm trying to implement on my own site. $(function () { var $txt = $('input[id$=TextBoxFiltroProv]'); var $ddl = $('select[id$=DropDownListProv]'); var $items = $ ...

jqueryasp.netwebhtml

How to easily center text across multiple lines using CSS

Looking for a way to center text horizontally and vertically within a div? I had it all working perfectly with this code snippet from a Stack Overflow post: text-align: center; vertical-align: middle; line-height: 90px; /* set line height to match you ...

htmlcss

Exploring the ways to retrieve the returned Dynamic scope in AngularJS

There's a specific need I have - I require a single AngularJS function that can dynamically return the scope variable based on an input parameter. When it comes to controller functions, I've come across examples of how to achieve this dynamic sco ...

htmlangularjsdynamic-scope