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/

I'm not sure what you're asking for - that article already covers the pros and cons of each method it talks about. — thirtydot, May 05 '11 at 09:32
I was just wandering if there was any other solutions out there, since none of these fits my purpose 100%. I might end up sticking with one of them anyway though. — jack, May 05 '11 at 09:50
Check out comments on this similar [stack overflow question](http://stackoverflow.com/questions/5895571/css-background-size-cover-in-internet-explorer-7) particularly the link posted by @Sandeep — My Head Hurts, May 05 '11 at 10:03

Jorge Sampayo · Accepted Answer · 2012-11-14T15:56:58.930

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

score 0 · Answer 2 · answered May 02 '14 at 18:50

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

Best way to background cover cross browser

2 Answers2

Linked