How to fix this thing that happens to background size cover?

HTML & CSS
1

Website. https://goo.gl/kPMjPt

using background-size: cover;

On my ipad and iphone when I click on the folders and they open/expand the background image expands along with them. This does not happen on desktops. Does anyone know or have any suggestions to prevent that from happening on mobiles?

2

The page does not appear to be made for mobiles. It’s not responsive and does not include the viewports metatag.
The problem may have more to do with the background being fixed, as that can be a problem for some mobiles.
But in reality, until the site is properly responsive, these smaller mobile issues can get to the back of the to-do list.

3

Hi Eric,

I’m on a mobile at the moment and have no developer tools but I’m guessing you have applied background attachment fixed to the body but iOS and other mobiles have a problem with this when cover is used and will stretch the background to the content rather than the viewport.

There is a fix in that you can apply the background to a position fixed element instead and then not use background attachment fixed at all.

I generally use body:after to create a viewport width and height position fixed element and then just apply a normal background to it and then cover will work (ensuring z index is controlled for your content to remain on top).

Also take note of Sam’s comments about the viewport meta tag.

3 Likes
4 
html {
background:url(/img/newyork-sd.jpg) no-repeat center center fixed;
background-size:cover;
overflow-y:scroll;
}
body {
width:800px;
margin:30px;
font:14px/1.6 Arial, Helvetica, sans-serif;
}

Ahh also I forgot I coded this template with minimal containers. So the body is the container. That may be the issue too. I’ll play with your guys suggestions thanks!

5

I’ve never bothered with mobile sites. But now that it is easier and that google penalizes you for not, I will google how to and try to emplement.

6

No, the issue is as I stated and you used background-attachment:fixed on the html element and background-size:cover and that won’t work in ios due to the bug I already mentioned.

This demo uses the method I mentioned above to make the background work on ios.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
}
body {
	background:transparent;
}
body:after {
	content:"";
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:-1;
	display:block;
	background:url(http://www.pmob.co.uk/mobile/images/a1.jpg) no-repeat 50% 50%;
	background-size:cover;
}
</style>
</head>

<body>
<p>Just stuff to scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
</body>
</html>
7

Awesome that does the trick! Thanks Paul. I don’t need display block on the body:after right cuz of position fixed? Or is doing something I don’t remember?

8

The ::after pseudo element displays as inline by default, so if you need it as a block you must specify it.

2 Likes
9

In this explicit case display:block is not needed because co-ordinates are specified at the same time as using position:fixed.

If you were using auto co-ordinates for positioned elements then the display:block is important because the auto position depends on where the element was in the document and that position would change if the element was inline or block.

Therefore when using :after or :before I generally add the display:block just in case co-ordinates are removed at a later date but in this case it is not really needed.

Positioned elements automatically get a display of block so its only in the case of auto positioned elements (positioned elements without co-ordinates) that it really matters.

5 Likes
10

Awesome thank you much sir!

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.