Why the background image of my website shows uncorrect on my phone?

[Job]

body{
background: url(“../images/background_no.png”);
background-size: 100%;
background-attachment: fixed;
}

is what I use on my website for the background image to be fully stretched out on the screen which works fine on my PC.

But whenever I check the website on my iPhone 5s it doesnot show correct.
It repeat the background in the Y direction, and the background image moves which the page when scrolling which also shouldnot happen.

Anybody that might knows whats wrong with my code?

[Beverleyh]

the background image moves which the page when scrolling which also shouldnot happen.

Unfortunately, that’s the way it’s supposed to happen on iOS – fixed backgrounds were disabled by Apple because they cause large repaints, and induce jank on mobile. But there are ways to around it https://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile

[Job]

thanks alot that worked!! i really didnot know that ios did that. i tried alot of things and i was already wondering why nothing of them had effect.

[Job]

by the way i have one more little question. i have the following code to have a better fitting background image when visiting the website from a phone:

@media (max-width: 755px) {
body:before{
content: “”;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(“../images/background_iphone.png”);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
@media (min-width: 756px) {
body:before {
content: “”;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(“../images/background.png”);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

the background image is always background.png somehow even when i visit the website from my iphone 5s with a width of 640px.
anything i did wrong in my code?

[Beverleyh]

The order of the media queries looks fine in this limited sample code.

What does the developer console say? Make sure there’s nothing later in the cascade/later on in stylesheets overriding it.

[Job]

thanks for your response!
afterall i solved the problem by changing the min-width & max-width. the resolution of my iphone 5s is 640×1136 but i guess somehow 1136 is the width and not 640 cuz this worked!

@media (max-width: 1135px) {
body:before{
content: “”;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(“../images/background_iphone.png”);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
@media (min-width: 1136px) {
body:before {
content: “”;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(“../images/background.png”);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

[Author]

Posts