{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 ら.Afraid 的问题《background-size: cover not working on iOS》','https://www.manongdao.com/q-88510.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
This is my code:
background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center;
It's working on desktop, iPad and Android mobile:
On Chrome and Safari on iPhone, the background is too big:
This happens when you have
background-attachment:fixed. On mobile, I usually putbackground-attachment:scrollinside of a@mediaquery.As @RyanKimber pointed out, fixed attached images use the whole
<body>size. On mobile this can get really tall which blows your image out. Setting the attachment back toscrollallows your cover image to stretch within its own container.This post answers your questions: why does CSS background-size: cover not work in portrait mode on iOS?
Not all browsers recognize the cover keyword for background-size, and as a result, simply ignore it.
So we can overcome that limitation by setting the background-size to 100% width or height, depending on the orientation. We can target the current orientation (as well as the iOS device, using device-width). With these two points I think you can use CSS background-size:cover on iOS in portrait-mode
See that post for more resources.
Try this:
As mentioned before, "cover" will cover document height, not view height. Most of the units will not work as expected hence vmax.
Not really cover, does the job with squared images :)
This caused me a number of problems as well. The problem is that iOS is using the full height & width of the body instead of the viewport to decide the size.
Our solution was to create a new
<div class="backdrop"></div>.We apply the background to this div and give it position: absolute; top: 0; bottom: 0; left: 0; right: 0.
Since this div is now the size of the viewport,
background-size: coverworks just fine.Elaborating on Ryan's answer, without adding any new
htmlnode or using@mediaqueries, using only one css.It works in production like a charm on iOS as well: https://www.doklist.com/
This code won't work, since iOS uses the hight of the
documentand not theviewport:Now this is the magic, the
body:afteris fixed, and not the background:I could have used the body itself, with "position:fixed;overflow-y:scroll", but I didn't want to mess with the positioning of the body and my overall layout.
So doing this on the body:after is a very easy fix. I have tested the solution on Mac, and iOS with firefox, safari, chrome.
I also created a github repo with 2 examples for this: https://github.com/thesved/fixed-cover-background