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.
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.
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.
Firstly, I’d advise you to add this to the <head> of your document:
<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:
@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
@media only screen and (max-width: 1024px) {
body {background: url(/images/small-bg.jpg) no-repeat 50% 0;}
}