I have a problem displaying the site with iphones in mobile mode

Technical Q&A
1

I changed the background image of my website (minimal template). When I access my site on my phone (iphone) the background image is displayed in ultra zoomed, while with other brands such as Samsung the display of the site remains correct.

Do you have a solution for me?

The first photo is screened from my iphone, and the other from a samsung

IMG_8931.PNG
IMG_8931.PNG1170×2532 250 KB

image0 (3).jpeg
image0 (3).jpeg921×2048 165 KB

2

Hi

@Luke191

your background properties is not supporting in code

3

how can i find a suitable background for the shopify code. Because all the background photos I put causes the same problem …

4

It’s likely that the browsers have different default display settings and you’re missing a CSS property to tell the browser how to size the background.

You could try making sure that the container with the background image has the following CSS:

background-container {
  background-size: cover;
  backrgound-position: center;
}

That should ensure that each browser knows how you want the image to be sized.

5

body {
background-image: url(“https://images8.alphacoders.com/474/474396.jpg”);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
display: block;
}

here is my line of code, it seems to me that it is already as advised.

The problem is present only on iphone, because with other brands of mobile the image is correctly sized.

Should I add a line of code for iphone? if yes how to differentiate an iphone from an android in my line?

thank you in advance

6

The problem is probably caused by the background-attachement: fixed; line - a lot of mobile browsers don’t support this at all.

Could you try removing that line and see if it solves the problem?

If you absolutely must have the fixed background you can either add the background image as a child elemend behind your content, and set that element to be a fixed element - which oddly IS supported on mobiles.

Or apparently you can use a media query just for iphones - I’ve never used this feature but for your setup it would look like:

@supports (-webkit-touch-callout: none) {
  body { 
    background-attachment: scroll;
  }
}

My recommendation is to just remove the background-attachment: fixed; line. Or remove it on all mobiles with a regular media query, rather than just on iphone, as it likely won’t work on at least some android phones despite working on the phone you’ve tested with.

7

Thank you for the message, I have tried all the proposed solutions but it does not change anything .

8

No problem, did you try the iphone media query? Or removed the background-attachment: fixed; line?

Can you share your preview link so I can take a look?

9

Here is the link to access the site, I think you will be blocked on the first page of the site because it is still under construction.
https://www.mypokertable.fr/