I've spent the morning doing research on the following issue. I'm making a one page site, using a lot of images. I'm aware that Safari is known for its weird handling of background-attachment:fixed, but that's working fine; my problem is background-size:cover
is not working in conjunction with fixed
.
I have 5 pages, all of which have a height
or min-height
of 100%. The last page is fixed like this:
#div5 {
height:100%;
width:100%;
position: relative;
background-image: url("img/background.jpg");
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
On iOS (in both Chrome and Safari) the background image is scaled to cover the full webpage, so it's really stretched.
At the same time, page 4 has the following css:
#div4 {
min-height:100%;
width:100%;
background:url(img/portfoliobg.jpg);
overflow: auto;
background-size: cover;
}
and this works like a charm.
So, something makes the browser behave really weirdly when combining fixed
and cover
. Does anyone have a solution to this?
iPhone X and XS: 2436 x 1125-pixel resolution. iPhone XR: 1792 x 828-pixel resolution. iPhone XS Max: 2688 x 1242-pixel resolution. iPhone 11: 1792‑x 828-pixel resolution.
All of the iPhone 13 wallpapers offer a resolution of 3073 x 1420. This is a bit larger than the resolution listed on Apple's website, but this is done to account for motion, along with placing the wallpaper exactly how you want it.
Use another div with position:fixed
to make the background fixed.
Like this: http://codepen.io/anon/pen/OVebNg
JADE
.fixed
.bgcover
SCSS
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
.bgcover {
background-image: url('http://globe-views.com/dcim/dreams/winter/winter-04.jpg');
background-size: cover;
width: 100%;
height: 100%;
}
}
Hope this help.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With