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

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;
}