Il modo migliore per il browser incrociato di copertina di sfondo

Question

Ho un'immagine 1024*768px che voglio utilizzare come sfondo per una pagina web.

Voglio anche che questo sfondo copra lo sfondo dell'intera finestra, anche quando è ridimensionato. E ... non sono l'immagine per allungare meno il più possibile!

Ho provato gli esempi qui, tranne quello jQuery - dato che mi piacerebbe meglio se faceva solo in CSS.

grazie!

EDIT: ecco il link: http://css-tricks.com/perfect-full-page-background-image/

Answer 1

Potresti provare il plugin di backstretch

È una soluzione JavaScript a una riga, includerla (anche jQuery) nelle intestazioni e chiamarla come esempio:

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

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

GitHub Fonte:https://github.com/srobbin/jquery-backstretch

Answer 2

Penso che alcuni buoni vecchi CSS possano tornare utili su cose come questa. Funziona bene sui browser desktop e sul mio 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;
}