Scenario
I am working on a web page where I want the background image to be fixed, covering the entire screen or window (excluding tablets and smartphones).
The background image has been created using ImageShack. Everything is running smoothly so far.
To showcase my progress, I have put together a Plunk example.
Issue
When viewing the page on a non-retina device like a Dell Notebook, the image appears to fill the entire background as intended.
However, when viewed on my iPhone's retina display, the image does not show in high resolution.
Current Approach
The JavaScript code being used in this project is as follows:
function isRetina() {
return window.devicePixelRatio > 1;
}
$(document).ready(function() {
var url = "http://farm8.staticflickr.com/7398/11622056325_08e35bd803_o_d.jpg";
var b = $('body'), w = $(window), width = w.innerWidth(), height = w.innerHeight();
$('#retina').text('Is ' + (isRetina() ? '' : 'not') + ' retina.');
$('#size').text(width + " x " + height);
b.css('background-image'
, 'url(http://imagizer.imageshack.us/'
+ width
+ 'x'
+ height
+ 'f0/'
+ url
+ ')');
if (isRetina()) {
b.css('background-size', (width / 2) + 'px ' + (height / 2) + 'px');
}
});
Inquiries
- What CSS configurations should be employed for displaying a high-resolution "retina" background image?
- How can I create a background image that fills the entire visible screen on an iPhone?
Update: Revised Solution
While mcmac's response provided some valuable insights, it did not completely address my query. My main focus was on understanding how to define parameters for a background image to appear in high resolution on a retina screen.
The solution turned out to be rather simple.
a) Utilizing background-size Property
With the use of background-size, the image dimensions need to be twice the size of the screen in both directions, with the background-size property set to match the screen size (instead of half the size of the screen as previously done):
b.css('background-image', 'url(http://my.image.url.com/size' + (width * 2) + 'x' + (height * 2) + ')');
b.css('background-size', width + 'px ' + height + 'px');
b) Employing a Fixed Image
As suggested by R3tep, instead of using a background image, a standard fixed image can be utilized. In this case, the image must be double the screen size, and the css rule must be height: 100%; width: 100%.