Background-images and Ipad

About the template and stylesheet - and changing the menu
Post Reply
maeg
Posts: 525
Joined: Fri Feb 20, 2009 2:27 pm
Location: Agerbæk, Denmark
Contact:

Background-images and Ipad

Post by maeg » Tue Mar 27, 2012 6:01 am

Hi

I need a littel help

I have a website that is using background image (2200x3000) in the <body> section of the site.

When I open that site on Safari on an iPad it gets scaled down (~30%) in a different proportion than the content.

I have found a way to fix it, but the quality of the background-image is getting bad. :(

I have done this.

In template.htm i add this line

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
In stylesheet.css i add this code to the #body that calles the background-image

Code: Select all

-webkit-background-size: 2200px 3000px;
Have anyone found a bettet way, that don't change the quality of the background image?? :?:

Tata
Posts: 3588
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Background-images and Ipad

Post by Tata » Sun Aug 25, 2013 5:46 am

What is the reason to use an image of such domension?!!!
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Background-images and Ipad

Post by cmb » Sun Aug 25, 2013 11:12 am

@Tata: I have moved your reply to the thread where it should belong (the other thread was opened by a spammer, who just copied maeg's question). However, I'm not sure, if maeg's issue is not already solved.
Tata wrote:What is the reason to use an image of such domension?!!!
Indeed, images so large may not be the best idea, especially regarding slow internet connections and bandwidth limitations. I assume only a small amout of visitors have a display that is able to display 2200px horizontally, so downsizing the image seems to be reasonable. However, for displays with a higher resolution this forces the browser to upsize the image, what is generally worse than downsizing. One has to find a reasonable compromise here.
maeg wrote:Have anyone found a bettet way, that don't change the quality of the background image?
I assume that downsizing images by a large amount always decreases the image quality a bit, at least. A sharp resizer is likely to result in pixelation (especially when the images are compressed with a lossy algorithm such as "normal" JPEG); typically, diagonal lines will look like stairs. A soft resizer results in blurring. Again, a reasonable compromise is called for.

I don't know what's the best solution here, but https://developer.mozilla.org/en-US/doc ... t_meta_tag might give some hints. Furthermore, scaling the image server-side (see http://adaptive-images.com/) might be a good idea.
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply