Come allungo un'immagine di sfondo per coprire l'intero elemento HTML?

Sto cercando di ottenere un'immagine di sfondo di un elemento HTML (body, div, ecc.) Per allungarne l'intera larghezza e altezza.

Non avendo molta fortuna. È anche possibile o devo farlo in un altro modo oltre ad essere un'immagine di sfondo?

Il mio CSS attuale è:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Grazie in anticipo.

Modifica: non mi piace mantenere il CSS nel suggerimento di Gabriel, quindi sto invece cambiando il layout della pagina. Ma questa sembra la risposta migliore, quindi la contrassegno come tale.

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

Utilizza la background-sizeproprietà: http://www.w3.org/TR/css3-background/#the-background-size

In breve puoi provare questo ....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Dove ho usato pochi css e js ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

E funziona bene per me.

Non sono sicuro che sia possibile estendere un'immagine di sfondo. Se ritieni che non sia possibile o che non sia affidabile in tutti i browser di destinazione, puoi provare a utilizzare un tag img allungato con z-index impostato su un valore inferiore e posizione impostata su assoluto in modo che altri contenuti appaiano sopra di esso.

Facci sapere cosa finisci per fare.

Modifica: quello che ho suggerito è fondamentalmente cosa c'è nel link di gabriel. Quindi provalo :)

Per espandere la risposta @PhiLho, puoi centrare un'immagine molto grande (o un'immagine di qualsiasi dimensione) su una pagina con:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Oppure puoi usare un'immagine più piccola con un colore di sfondo che corrisponda allo sfondo dell'immagine (se è un colore solido). Questo può o non può essere adatto ai tuoi scopi.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Se devi allungare l'immagine di sfondo durante il ridimensionamento dello schermo e non hai bisogno della compatibilità con le versioni precedenti del browser, questo farà il lavoro:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Se hai un'immagine orizzontale di grandi dimensioni, questo esempio ridimensiona lo sfondo in modalità verticale, in modo che venga visualizzato in alto, lasciando vuoto in basso:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

Il seguente codice che utilizzo principalmente per ottenere l'effetto richiesto:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Non è possibile in puro CSS. Avere un'immagine che copre l'intera pagina dietro tutti gli altri componenti è probabilmente la soluzione migliore (sembra che questa sia la soluzione data sopra). Ad ogni modo, è probabile che sembrerà comunque orribile. Proverei un'immagine abbastanza grande da coprire la maggior parte delle risoluzioni dello schermo (diciamo fino a 1600x1200, sopra è più scarsa), per limitare la larghezza della pagina, o semplicemente per usare un'immagine che affianca.

Immagine{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 

Crea semplicemente un div come figlio diretto di body (con il nome della classe bg per esempio), che comprende tutti gli altri elementi nel corpo, e aggiungilo al file CSS:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Fare riferimento a questo collegamento: https://www.w3schools.com/css/css_rwd_images.asp Scorri verso il basso fino alla parte che dice:

2. Se la proprietà background-size è impostata su "100% 100%", l'immagine di sfondo si allungherà fino a coprire l'intera area del contenuto

Lì mostra "img_flowers.jpg" che si estende alla dimensione dello schermo o del browser indipendentemente da come lo ridimensioni.

Per me funziona

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}