Trouble with background-image display on iPhone and iPad devices

Hey there! I'm having an issue with my background-image specifically on Apple devices like the iPhone and iPad. While it looks exactly how I want it to in all other browsers and on Android devices, on Apple devices it's just not right.

Here's how it appears in various browsers: Safari, Firefox, Chrome, Opera, Edge, IE

https://i.sstatic.net/WBdjy.png

And here's how it looks on Android:

https://i.sstatic.net/mbNHj.png

But unfortunately, on Apple devices, it shows up like this:

https://i.sstatic.net/rbj83.png

For the HTML code, all I have is a normal 

<div class="hero"> </div>

This is the CSS (Sass) that I've used:

.hero
    width: 100%
    height: 100%
    position: relative
    background:
        image: url(../image/pics/thailand.jpg)
        position: center
        size: cover
        attachment: fixed

You can check out the page here

I've already tried some of the solutions from similar questions, but nothing has worked for me yet. Any help would be greatly appreciated!

Thank you so much for your assistance!

htmlioscssiphonebackground-image

Answer №1

After experimenting with various solutions and avoiding the use of JavaScript, I found that the 'attachment' property was not working correctly on IOS. As a workaround, I modified the media settings to ensure that the picture looks good, although it is no longer fixed in place.

@media screen and(max-width:800px)
    .hero
        background:
            attachment: scroll

If anyone has an alternative solution to suggest, I would be grateful for the help.

Thank you

Answer №2

One way to enhance your website is by utilizing Stellar.Js in the following manner...

Embed the HTML code within the relevant div tag:

data-stellar-background-ratio="0.5"

Customize the CSS as follows:

background-size: cover;
background-attachment: fixed;

Implement the JavaScript like so:

$(window).stellar({ horizontalScrolling: false, responsive: true });

& If you encounter any whitespace or alignment issues, consider using this additional setting:

$(window).stellar({ horizontalScrolling: false, responsive: true, verticalOffset: 50 });

Feel free to give it a try and see the positive impact on your design!

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

Designing an advanced remote upload system using jQuery AJAX and PHP

Currently, I am in the process of developing an image hosting script and everything is going smoothly so far. To enable local uploading with drag & drop + AJAX, I have utilized various plugins which are working perfectly. Now, I am moving on to implementin ...

javascriptphpjqueryhtmlajax

Integrate a PHP link into a Gatsby/React project

I've been attempting to connect my contact form page, contactpage.php, with my Gatsby application. In the navigation bar (found in the Components folder), I've added the following code: <div> <a className="int_link_about" ...

javascriptphphtmlreactjsgatsby

The styling for material UI's default endAdornment is lacking accuracy

My Autocomplete component from material UI v5 includes a default endAdornment icon. However, the icon appears to have the CSS property top:unset, causing it to be styled incorrectly. Here is the code for rendering the Autocomplete: <Grid item xs={3}> ...

cssreactjsmaterial-ui

Is it possible to reorganize the order of elements in a

My goal is to create a flex column layout where the image appears first. However, I'm facing an issue with the code below, as it only changes the order when the flex direction is set to row (image on the left). It does not work for rows. </head> ...

htmlcsstailwind-css

Show and hide the div by clicking a button

Looking at the image below, my goal is to display the div under the reply button. (The div consists of a text box and send button) https://i.stack.imgur.com/jnaV4.png The code I have currently functions correctly. However, when clicking any reply button ...

phphtmlapibootstrap-4

Submit form data to MongoDB upon submission

In my node express setup, I have integrated functionality to store values entered in checkboxes and text areas into a MongoDB database. Initially, users could calculate a score by clicking a button associated with checkboxes, and then post the information ...

javascripthtmlmongodbrestexpress

Tips for parsing a nested dictionary that is grouped in Swift

I am encountering an issue while attempting to parse the JSON response below in SWIFT5. The problem I am facing is that the user and group data are returning nil values. { "user": { "0": { "id": "5 ...

iosjsonswift5jsonparser

Looking for the most effective method to integrate a side panel with a UITabbarcontroller?

Trying to create a sidebar (drawer) using uitabbarcontroller. I've successfully implemented it for uiviewcontroller using the JASidePanel library, but struggling to find a way to implement it with uitabarcontroller. Any suggestions or tips would be g ...

iosuitabbarcontroller

Effortlessly switch between CSS animation styles while adjusting animation settings

My HTML element with animation is defined as follows: <div id="box"></div> The box starts by moving 200 pixels to the right, taking 4 seconds to complete. .anim { animation-name: anim; animation-duration: 4s; animation-t ...

javascripthtmlcsscss-animations

Adjust the dimensions of the dropdown menu

Objective: How can I adjust the width of a select dropdownlist that is utilizing bootstrap v2? Challenge: I am uncertain about how to modify the width in the context of bootstrap. Additional Information: Keep in mind that there are three dropdownli ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can we prevent the restoration of size effects in jQuery UI versions 1.9 and above?

After implementing jQuery UI 1.9 or newer, I noticed that the size effect returns to its original state. Below is a snippet of my code: http://jsfiddle.net/mQCxY/ $(function () { $('.circle').click(function () { $(this).effect("size ...

jquerycssjquery-ui

Moving divs to a separate line in mobile display

I currently have a basic image-thumbnails landing page set up like this: <div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div> <div style="display: inline-block;"><i ...

htmlcss

When the button is left alone, its color will change

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <bod ...

htmlangularjs

Unable to send message using window.parent.postMessage when src is set to "data:text/html;charset=utf-8" within an iframe

I'm currently working on a project to develop a compact editor that allows users to edit HTML using an iframe. I'm passing an HTML string into the src attribute as data:text/html, but I'm encountering challenges with communication in the par ...

javascripthtmlangularjs

Problem with Adjusting Bootstrap Carousel Caption Placement per Slide

Trying to customize the position of each Bootstrap Carousel slide in This Demo. The code snippet below modifies the caption positioning: .carousel-caption { top: 0; bottom: auto; } However, I need to adjust the positions of other slides' ca ...

csstwitter-bootstraptwitter-bootstrap-3

Tracking video and audio activities on iOS native app with GA v2 integration

Is it feasible to monitor video and audio plays as screen views using the GA iOS SDK v2? I am attempting to do so. Traditionally, the uiviewcontroller reference would be replaced with GItrackedviewcontroller. However, this does not appear to be a viable ...

iosobjective-cgoogle-analytics

enigmatic margin surrounding navigation dots

I have added a straightforward dot navigation to the banner of my website. You can check it out HERE. The HTML code I used is shown below: <ul class="carousel-dots"> <li> <a href=""></a> </li> <li> ...

htmlcss

What could be the reason that my d3.tooltip is not functioning properly for these specific two lines on the chart?

I am currently experiencing issues with the d3.tool tip for my line charts. Additionally, I would like to adjust the y-axis scale to create larger gaps between the lines. Below are the codes used to generate the line charts: <!DOCTYPE html> <meta ...

htmljsond3.jsvisualizationlinechart

Are all elements still displaying the menuBar style? Using the PHP include function, <?php include... ?>

Here is the Menu Bar code I am using: <!DOCTYPE html> <html> <link href = menuBarStyle.css rel = "stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <div class = "menu"> ...

htmlcss

Tips to prevent browser from freezing while creating a large number of HTML elements

I am currently utilizing Selection.js to develop a customizable grid on my website. To make this work effectively, I need a specific number of div elements to establish the selectable area. In my scenario, I generate all the divs using a for loop and then ...

javascripthtmlreactjs