Best way to background cover cross browser - css

Question

I have a 1024*768px image that I want to use as a background for a webpage.
I also want this background to cover the background of the entire window, even when it's resized. And.... I wan't the image to stretch least as possible!
I've tried the examples here, except the jquery one - since I'd like it better if only done in css.
thank you!
edit: here's the link: http://css-tricks.com/perfect-full-page-background-image/

Answer 1

You could try the backstretch plugin
It is a one line javascript solution, just include it (also jquery) in your headers and call it as the example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
// To attach Backstrech as the body's background
$.backstretch("path/to/image.jpg");
</script>
Official page:
http://srobbin.com/jquery-plugins/backstretch/
Github source:
https://github.com/srobbin/jquery-backstretch

Answer 2

I think some good old CSS can come in handy on things like this. This works well on desktop browsers and my iPhone/iPad:
html {
background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
overflow: hidden;
}
body {
background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
overflow: auto;
}