Geek asks and answers

Best way to cross-browser background coverage

I have an image of 1024 * 768 pixels that I want to use as a background for a web page.

I also want this background to cover the background of the whole window, even when it changes. And ... I do not want the image to be stretched as little as possible!

I tried the examples here except jquery one - since I would like it to be better if only done in css.

Thank you!

edit: here is the link: http://css-tricks.com/perfect-full-page-background-image/

+3
source share
2 answers

You can try the backstretch plugin

This is a single line javascript solution, just include it (also jquery) in the headers and name it as an 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 background
    $.backstretch("path/to/image.jpg");
</script>

: http://srobbin.com/jquery-plugins/backstretch/

Github: https://github.com/srobbin/jquery-backstretch

+2

, CSS . 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;
}

0

More articles:


All Articles