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;
}
Related
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;
/* 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%;}
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
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;
}
}
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.