I'm working on a website that scrolls as it should in Desktop and iPhone, but it doesn't scrolls in Android mobile (testing on Huawei P10).
In my css I have lines like:
body {
font-family: 'Montserrat', sans-serif;
min-height:100%; height:100%;
-webkit-font-smoothing: subpixel-antialiased;
background: url('../img/bg-main.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you wanted to see, this is the website: CLICK
Related
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;
}
Using all browsers on Computer (chrome, safari, opera, edge) the background image in footer is displayed fine. But using browsers in ANDROID the background image does NOT displayed. In the other hand, using an iPhone (safari, chrome) my image in footer is displayed!!! The only bug/problem there is on Android`s browsers.
<footer class="footer" style="background-image: url('img/creative/backgrounds/lll.jpg')">
//Css Code
footer.footer {
color: white;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding: 255px 0 20px;
}
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;
in android version of phone gap background image is not fully covering the screen though having high resolution image
body {
background-image: url("../www/img/tracker_bg.jpg");
background-size: cover;
background-repeat: no-repeat;
}
though using attachmend fixed and changed ever style to set background but for some screen it is not covering full screen as back ground
You can try this CSS3 Code:
body{
background: url(img/tracker_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Help From here
/* 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%;}