Meilleur moyen de couvrir le navigateur croisé en arrière-plan

Question

J'ai une image 1024 * 768PX que je souhaite utiliser comme arrière-plan pour une page Web.

Je veux aussi que ce contexte couvre l'arrière-plan de la fenêtre entière, même lorsqu'il est redimensionné.Et .... Je ne suis pas l'image pour étirer le moins possible!

J'ai essayé les exemples ici, à l'exception de la JQuery One - depuis que je l'aimerais mieux si seulement en CSS.

Merci!

EDIT: Voici le lien: http://css-tricks.com/ parfait-page-page-fond-image /

Answer 1

vous pouvez essayer le plug-in à dos à dos

C'est une solution JavaScript à une ligne, l'inclure simplement (aussi jQuery) dans vos en-têtes et l'appelez comme exemple:

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

Page officielle: http://srobbin.com/jquery-plugins/backstrech/

Github Source: https://github.com/srobbin/jquery-backstrech

Answer 2

Je pense que de bons vieux CSS peuvent être utiles sur des choses comme celle-ci.Cela fonctionne bien sur les navigateurs de bureau et mon 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;
}