Best way to background cover cross browser

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