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;
}

Responsive works on Iphone, but not on Samsung-phones

/* CSS Dokument */
body{
background-image: url('baggrund.jpg') !important;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
#media only screen and (max-width: 767px) {
body{
background-image: url('baggrund.jpg') !important;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
}
I have added the above code to my CSS document and with the help from bootstrap my website will be responsive.
But the funny thing is, that my responsive works fine on iPhone, but not on Samsung (Tried on S3/S5 mini).
I'm really glad for this simple solution, so I would like to keep it this way.
Mobiletest.me doesn't show a correct screen. It's otherwise when you are doing it physically.
My website is: http://odsgaardklausen.dk/DBS/DBS.php

I solved the problem myself by adding to the CSS :
html {min-height:100%;}

HTML site image background showing error on iPhone

I build a html website showing on my mobile device, while there's no problem showing image background on my Android device Galaxy S4 like this(The profile is showing!) , on the other hand, the profile background is not showing correctly like this . I had adjust the background-size so on, but all is vain. So this is my CSS code below:
#media only screen and (max-device-width: 640px) {
.hrader-part{
background: url(../images/bg_android.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
padding-bottom: 2em;
width: 200px;
height: 300px
}
}
#media only screen and (max-device-width: 1080px) {
.hrader-part{
background: url(../images/bg_android.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
padding-bottom: 2em;
width: 365px;
height: 100%
}
}
Thanks a lot buddies!

I do not have access to an iPhone, but I was able to reproduce your bug in Safari 7 on Mac OS X, using the iPhone user agent. The css from the media query was not being applied to the element. Changing max-device-width to max-width fixed the problem.
Also regarding your media queries: The max-device-width: 1080px query overrides themax-device-width: 640px query, since it comes later in the stylesheet. If you add a min-width attribute to the second media query, it will allow both queries to function:
#media only screen and (min-width: 641px) and (max-width: 1080px)

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;
}
}

Why does this CSS not work for Chrome on Android but works everywhere else?

This really puzzles me. I want to have pic.jpg be static in the background (not move when scrolling) and that it won't stretch.
It works on every browser (i.e. Chrome, Safari, Firefox) except Chrome on Android (it even works on Android original browser)
body{
background-color: transparent !important;
background-image: url(<%= asset_path "pic.jpg" %>);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Chrome for Android renders it as pic.jpg being halfway up in the screen, not on the entire page and doesn't stay static on scroll..
I can't reproduce it on jsfiddle, I also try to debug it with my Android phone and nothing seems to help.
Isn't this the way to create the background image?

I do not wanna be cruel but this issue has been reported approximately 4 years ago
http://code.google.com/p/android/issues/detail?id=3301
most recent response can help I guess:
In my experiments with Android, I noticed that all the other DIVs within the body behaved correctly, including centering, so I moved image to another DIV and it worked.
Funny one.
best

I have the similar problem.. and I fix it with this
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}

I have found a workaround that makes the background display correctly on Chrome for Android: define the background in the html tag, not the body. Here is the new css:
html{
background-color: transparent !important;
background-image: url(<%= asset_path "pic.jpg" %>);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And yes, this is valid markup. In my experience, the background still works correctly in every other browser too.