Help (someone with iphone) with background stretching

xesvuli420 · January 20, 2014, 9:21am

Hey everyone. I have a simple website I am messing around with that I cant get to work. Please someone help me.

Im using media query to adjust my pages and every things working except the background.

In every browser Ive used, the background image is fixed to the size of the browser, and the body scrolls. but on an iphone (which will be heavily used on this site) the stupid thing follows the height of the body… Ive searched and searched to find help, and I can find others with the same issue… but no answers… hopefully someone is here that is smart enough to know…

I appreciate your help guys!

BTW this is my first ever coding project so please, easy with the criticisms lol =o)

Thanks
-Shane

https://www.dropbox.com/s/jpzbu343nh9es3p/Website.rar

PaulOB · January 20, 2014, 10:55am

Hi,

The first thing you need tyo fix is to add the viewport meta tag as the iphone will not obey any of your media queries until the viewport meta tag instructs it to do so.

Put this in the head of your page.


<meta name="viewport" content="width=device-width, initial-scale=1.0">

That won’t fix the fixed background but it will make the page fit properly on the iphone and other mobile devices assuming your media queries are properly constructed.

Fixed backgrounds don’t really work on mobiles because of the way that handle the viewport as its like a window that looks through to the page underneath. However fixed elements do work and you could use a fixed element that contains an image and scale that image to 100% and it will remain fixed. Of course you lose the aspect ration that background-size:cover gives you so you could use a media query and just give the rule to devices rather than desktops.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
	margin:0;
	padding:0;
}
body {
	background:url(images/plan.jpg) no-repeat fixed;
	background-size:cover;
}
.fixed { display:none }
@media screen and (max-device-width: 500px)  {
body { background:transparent; }
.fixed {
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:-1;
	display:block;
}
.fixed img {
	width:100%;
	height:100%;
}
}
</style>
</head>

<body>
<div class="fixed"><img src="images/plan.jpg" ></div>
<p>scroll11</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>

Hope that helps

PaulOB · January 20, 2014, 11:10am

Actually here’s an easier solution.

We don’t need the image as we can use a background image on the fixed element but as long as we don’t set the background image to fixed it will work properly as the element itself is fixed. That means we can use background-size without problems now.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
	margin:0;
	padding:0;
}
body { background:transparent; }
.fixed {
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:-1;
	background:url(images/plan.jpg) no-repeat;
	background-size:cover;
}
</style>
</head>

<body>
<div class="fixed"></div>
<p>scroll17</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>

We just give the code to everyone so no media queries needed.

Or better still use the :after element on the body to save any extra html at all.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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(images/plan.jpg) no-repeat;
	background-size:cover;
}
</style>
</head>

<body>
<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>
<p>scroll</p>
</body>
</html>

Support for :after is IE8+ but background-size: is Ie9+ anyway so I guess you aren’t supporting that far back anyway.

xesvuli420 · January 20, 2014, 12:47pm

Thank you so much for that code… however it doesn’t work for me…

First off when you look at the image with the browser in spec with the media query, only half the image appears.

2ndly you are so right about the meta tag! I actually have it in the actual website, but when I “cleaned” it to post here I accidentally deleted it.

third, heres another problem I have thats not related but while we are fixing this mess, if you take my original code and run it, then minimize your browser to initiate the media query, it all looks good… BUT there is a scroll bar at the bottom that will let you scroll to the right until the body is off the page. Thats odd… any ideas why?

Again I appreciate your help, but I dont think we have a solution quite yet for the iphone problem.

Thanks again!

PaulOB · January 20, 2014, 1:43pm

You are mistaken:). It will work in exactly the same way as the desktop version. It’s just that I set background size to ‘cover’ instead of the 100% 100% that you used as that looks awful because you lose the aspect ratio of the image and the image just gets squished beyond recognition.

I wouldn’t want to inflict that on my visitors but feel free to change it back if that’s what you wanted although I wouldn’t recommend it. It will then lok the same as your original.

background-size:cover maintains the image aspect ratio and tries to fit as much of the image as it can into the available space but never squish or compress the image. You can set the image to be centred (refresh) so that the middle is always visible rather than the edges.

third, heres another problem I have thats not related but while we are fixing this mess, if you take my original code and run it, then minimize your browser to initiate the media query, it all looks good… BUT there is a scroll bar at the bottom that will let you scroll to the right until the body is off the page. Thats odd… any ideas why?

The scroll is caused by the element called .busbox. You have set width to 0 and height to 0 for some reason but that still means that the content overflow will be visible (the image) and cause a scrollbar. If you don’t want that element at smaller widths then just set it to display:none.

xesvuli420 · January 20, 2014, 8:23pm

Man, Im not even afraid to admin it… I could kiss you square in the mouth! You have no idea how much I have hunted and tested and tried and cried over this stupid thing (the stretching part) and you swooped in an fixed me right up!

I forgot to clear my cache this morning so my phone wasnt registering the change… after your mistaken:D comment I decided to try it again, plus I was eager to try the the busbox solution(which worked too of course). Hey I learned a new code.

Thank you so very very much mate! You have literally made my day! I owe you!

So I just update all my pages to reflect that code, and man oh man how happy am I!!! I just wanted to come back and say thank you 1 more time for taking the time to set me strait!!!. I want to ask you millions more questions as I am a newcomer to html/css and I realize your a master....BUT I know I need to learn this stuff, and I wouldn't dare ask something I haven't exhausted myself trying to figure out on my own! I dont want to be one of those who want to be spoon fed. Long story short Thank you so very very much again!!!

PaulOB · January 20, 2014, 9:26pm

xesvuli420:

So I just update all my pages to reflect that code, and man oh man how happy am I!!! I just wanted to come back and say thank you 1 more time for taking the time to set me strait!!!. I want to ask you millions more questions as I am a newcomer to html/css and I realize your a master....BUT I know I need to learn this stuff, and I wouldn't dare ask something I haven't exhausted myself trying to figure out on my own! I dont want to be one of those who want to be spoon fed. Long story short Thank you so very very much again!!!

You’re welcome

Glad that you are willing to try yourself first as that’s the best way to learn but if you get stuck then just shout and someone will help.

Topic		Replies	Views
Responsive Design Question HTML & CSS	2	853	January 19, 2022
Background image issue on iPhone HTML & CSS	4	584	December 1, 2010
Full body background image stretch for iPhone/iPad HTML & CSS	6	4400	March 10, 2011
Responsive web design Get Started	11	746	October 8, 2014
Fixing background images on idevices with media queries? Mobile	4	2408	October 8, 2014

Help (someone with iphone) with background stretching

Related topics