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
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;
}
CSS Challenge:
This CSS gets my background to fill 100% of the screen height but there is a minor problem - when you scroll down there is initially white space, then when you release your finger and stop scrolling the background image "adjusts" and fills 100% of the screen height again. The problem does not re-occur on the same page if you continue to scroll, just the first time.
<body>
<div class="background"></div>
<div class="content"></div>
</body>
and the CSS:
html{
height:100%;
}
.background{
position: fixed;
z-index: 0;
width: 100%;
height: 100%;
background-image: url('../image/backgroundpicture.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 50% 10%;
}
.content{
width:100%;
height:200px;
position:relative;
z-index:1;
top:1800px;
}
The Problem is there too, when I put the background-image in the Body!
This is (FINALLY) solved due to changes in how Chrome for Android and iOS Safari work! Have to use 100vh for the height and it will function exactly as expected.
https://developers.google.com/web/updates/2016/12/url-bar-resizing
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url('../image/backgroundpicture.jpg');
background-size: cover;
z-index: -1;
}
Should be all you need!
Could be wrong, this question is a little unclear. By default there will be white space which can be removed with this snippet taken from a CSS Reset. Does that help?
CSS
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Do you want the background to be underneath all your content? If so, you should just apply it to the body.
CSS
body{
background: url('http://www.placehold.it/500') fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Edit - Create an HTML page exactly like this, is there the same problem?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, body div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: Helvetica;
}
#background {
background: url('http://www.placehold.it/500') fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div id="background">
<!-- Fill me with content -->
</div>
</body>
</html>
Wish that one day someone could work out a solid work around for a viewpoint that changes height...
I have tried a lot of different ideas, and still can't find one that works well.
The best that I have found is to read the (window).height() and add 60px to account for the title bar, and resize the element containing the background to that height..
Its still not the best as 60px will not always be spot on and you are just expanding the background past the smaller viewpoint size..
If there were only a way to get the max-viewpoint size then that would solve everything :(
body {
padding : 0;
margin : 0;
}
This has to work.
Please take a look at backstretch.js which keeps the image responsive no matter where we open the site whether in a mobile or desktop.
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;
}
}