Perfect CSS Background Image - css

Question

I've been experimenting with a lot of ways to create a background image on a website that works well, however I am yet to find a version that does not causes some sort of an issue.
Here is what I am looking for:
When in 1920 x 1080 then the image is perfect, fits the screen as intended.
When the user zooms out the browser, the image stays intact.
When the user zooms in, the image zooms in as it should (scales with the website)
When the users makes the window smaller, the image stays centered and reduces left and right to keep the center of the image focused.
When the user zooms out and resizes browser, image stays centered, shrinks left and right and the image doesn't shrink.
Here is what I tried, and problems I have found:
Method 1
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Demo here: http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Problem: Scroll down to the bottom of the page, refresh a few times. You will notice that the image doesn't load every time until you start scrolling. This issue only happens on chrome browser (Seeing how this is the most used browser by our visitors, its an issue) Also I have found that the image doesn't load as fast as with other methods listed below.
No fallback for older browsers (or at least I don't know how to set it)
Method 2:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Demo: http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php
Problem: When browser is resized, image gets stretched.
Method 3:
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Demo: http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php
Problem: Image shrinks and becomes bigger and browser resize (this doesn't happen in other examples) When you zoom out and resize, image stretches, doesn't stay centred.
I understand that what I'm asking for might not be possible with CSS, however I think if we can come up with a single solution that can work cross browsers for an image that stays centred and is not shrunk or stretched, that would benefit a lot of people.

Answer 1

Usually i use first method.
Else am usin an jquery plugin called Backstretch. Link here
Let me know how it goes after testing it.