SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image with using css (on mobile phones)

    Hi,

    I'm trying to use background image that would auto resize (width and height) to the size of browser (to any size). I've used the code below, however it doesn't work on smart phone (android). Width of image is done correctly, but height just doesn't want to auto resize. Everything works normally on laptop browsers though. Any suggestions how to solve this?

    Code that I use:
    HTML Code:
    body {
    	background: url(../images/grunge_background_mobile.jpg) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 12px;
    }
    Kind regards,

    Boki

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Background size is a new CSS3 property that is not necessarily well supported on mobiles. A better option might be to use media queries, and serve up a different background image to smaller devices. E.g.

    Code:
    body {
    	background: url(../images/desktop.jpg) no-repeat center center fixed;
    }
    
    @media only screen and (min-width : 320px) and (max-width : 480px) {
    	background: url(../images/mobile.jpg) no-repeat center center fixed;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for reply. I use media queries to deliver smaller size image (also smaller width and hight), however it also doesn't auto resize to scrollable height (it fits in width, but not height). I've added following property to body and that seems to solved the issue on smart phone somehow (although image is little bit distorted): background-attachment: scroll;

    I'm sure there is some other solution?!?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    According to caniuse Android has a problem with background-size.
    Android 2.1 doesn't appear to honor background-size, only -webkit-background-size, which requires both width and height to be specified.
    Try something like:

    Code:
    -webkit-background-size: 100%; 
        -moz-background-size: 100%; 
        -o-background-size: 100%; 
        background-size: 100%; 
        -webkit-background-size: cover; 
        -moz-background-size: cover; 
        -o-background-size: cover; 
        background-size: cover;


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
  •