Develop Reference

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

Problems using flexbox on Android 4.4.2

I have inherited some flexbox code that's been running fine in iOS using Cordova. We're now trying to deploy to Android, supporting KitKat and above.
I have some flexbox code that works fine in Android 4.4.4, 5.X, and 6.X but fails in 4.4.2. I have an HTC One Mini running 4.4.2 and have tried it on a couple of other 4.4.2 machines with the Amazon Device Farm. I've read that there are some known problems with flexbox in 4.4.2 but no solutions are proposed.
When I run this code on 4.4.2, nothing shows up in the swiper-container. On other versions (and iOS), I get a picture and can then swipe through to see other pictures.
Any thoughts would be greatly appreciated!
Jon
Here is my flexbox css:
.swiper-slide {
margin: auto;
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#swiperPic1 {
background-image:url(../assets/screen-1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#swiperPic2 {
background-image:url(../assets/screen-2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#swiperPic3 {
background-image:url(../assets/screen-3.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#swiperPic4 {
background-image:url(../assets/screen-4.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}

background-size: cover on android/iOS

so I have this html markup:
<div class="nav"></div>
<div class="content></div>
.nav{
background: url(...) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 10;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
}
The .nav element is fixed positioned with background-image and background-size: cover set. It also has a higher z-index than .content element, so that the .content would hide behind the .nav when scrolling down the page.
This setup works well in browsers but fails on android/iOS (the background image on .nav element becomes transparent and does not hide the .content).
Any ideas?
JSFiddle: https://jsfiddle.net/amp1Lyjq/1/
This part is a fix for iOS momentum scrolling:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;

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

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