SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixing background images on idevices with media queries?

    Hi all, I just finished building my first website from scratch and it worked perfectly except that the background image won't display on ipads or iphones. I've been researching and found out that the image is too large. I was thinking of using media queries to provide a different image for idevices. Is this the best way to fix this problem? How would I implement this sort of solution. Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi jakash. Welcome to the forums.

    Yes, if it's a background image, then media queries are the perfect way to do this, as you can offer up different ones depending on the screen size. Browsers that don't meet the media widths won't download the image, which is great. Inline images, by contrast, will be downloaded, even if hidden. So this makes background images vastly preferable.

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, that's what I was thinking was the case. How would I go about creating a query that would serve up a smaller image that will work on idevices but give the regular large image to everything else. Every thing I've been able to find on the subject is for responsive design (which I guess this technically is) and doesn't deal with this type of situation.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jakash View Post
    How would I go about creating a query that would serve up a smaller image that will work on idevices but give the regular large image to everything else.
    Firstly, I'd advise you to add this to the <head> of your document:

    Code:
    <meta name="viewport" content="width=device-width;">
    It's a good idea to include that on all sites to help mobile displays.

    Then, in your style sheet, put something like this:

    Code:
    @media only screen and (max-width: 480px) {
    	body {background: url(/images/small-bg.jpg) no-repeat 50% 0;}
    }
    to target smartphones, or to catch devices like iPad in one hit, something like

    Code:
    @media only screen and (max-width: 1024px) {
    	body {background: url(/images/small-bg.jpg) no-repeat 50% 0;}
    }


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
  •