SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help (someone with iphone) with background stretching.

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <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.


    Code:
    <!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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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.
    Code:
    <!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.

  4. #4
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by xesvuli420 View Post
    Thank you so much for that code... however it doesn't work for me..
    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.

  6. #6
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 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!

    ~~~Edit~~~
    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!!!
    Last edited by xesvuli420; Jan 20, 2014 at 14:33. Reason: more appreciation!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by xesvuli420 View Post

    ~~~Edit~~~
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •