Develop Reference

Mobile view issues with iphones

I have an issue with mobile views on iphones. On android devices everything works fine. I also tried to set the specific width and height for iphone xr but it still doesn't work.
I have tested my website in google mobile friendly test and everything was ok.
This is my code that works perfectly for android devices with max-width 700px:
body {
background-image: url('/wp-content/uploads/2020/08/ass-1.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
#media screen and (max-width: 700px) {
body {
background-image: url('/wp-content/uploads/2020/08/mobiledevicelogo2.png');
background-position: fixed;
background-repeat: no-repeat;
background-size: cover;
}

iPhone XR having resolution max-width:414px
More info : https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/
#media screen and (min-width: 414px) {
body {
background-image: url('/wp-content/uploads/2020/08/mobiledevicelogo2.png');
background-position: fixed;
background-repeat: no-repeat;
background-size: cover;
}

background image not displaying on phone

Working on new page with background image. Displays fine on desktops and tablets but fails on android phones.
body {
background: url("images/bk1.jpg") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}

This question was asked before but it was about IOS: How to replicate background-attachment fixed on iOS
I Think the problem related to background-attachment fixed, so i think you need to make it like this:
*notice: the property of background-attachment won't work on mobile
body {
background: url("images/bk1.jpg") no-repeat center center;
background-attachment: fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}

Why does my website have different view in Android and IOS?

This is how my website looks like in an iOS browser.
IOS view
But when my friend opens my website in an Android browser it looks horrible: Like this Picture
Please suggest some advice what to do with this kind of problem.
Here is my background code.
body {
background-image: url(images/contact.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
background-color:#245528;
}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
background-size: cover;
}
}

background-size not getting scaled after cover

this would be my 1st question here which tells am new at programming.
I have a background image which just isn't getting scaled after using 'background-size :cover' or background-size: 100% 100%;
This problem only seems to occur only on android devices
Min- width and min-height doesn't work and I have encountered several ppl with similar problems but their solutions have not helped
This is my css
body {
background-image: url("../img/bck-img.png");
background-color: transparent !important;
background-position: center center;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size:100% 100%;
background-attachment:fixed ;
background-repeat:no-repeat;
/*
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-attachment:fixed ;
*/
background-repeat:no-repeat;
min-height:100%;
width:100%;
}
html{ /*height:100%;*/ min-height:100%; width: 100%;}
#nav1 {
width: 100%;
height:35%;
margin: 0 0 0 0;
position:fixed;
left:0px;
top:0px;}
The comments are different trial and error soultions
Thanks

CSS to set background image fixed on android mobile phones?

I have set a fixed background image on my website and it looks fine on desktops and all browsers on desktop but on android phones it tiles and repeats it. I cannot find a work around this. Here is the code.. If someone has a fix for keeping a background image fixed without repeating on android Chrome please let me know.. thanks. Please exclude any comments that will not help.
the CSS:
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("images/320htmlbackground.png");
background-attachment: fixed;
}
also tried this but didn't work.........
html {
background: url("images/320htmlbackground.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Try this:
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("images/320htmlbackground.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}

I just had a similar problem but I'm not sure if it's the same one or not. My problem was that the background image wasn't staying in the same place as you would expect from a fixed image. I.e. when I scrolled up and down the background image moved with the page.
It turned out that I had set the background on the body tag. It worked fine on all browsers except on my phone. I changed the background to be on the html tag and it stays where it should without moving as I scroll.

For me this works well:
body{
position: relative;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
#media screen and (max-width: 767px) {
height: 100%;
overflow-y: auto;
}
}