Come utilizzare l'immagine di sfondo al 100% CSS con contenuto scorrevole?

Desidero creare un sito con un'immagine di sfondo che riempia sempre l'intera finestra, anche se il contenuto può scorrere verticalmente.Come utilizzare l'immagine di sfondo al 100% CSS con contenuto scorrevole?

Ho creato this JSFiddle utilizzando background-size: cover per ridimensionare l'immagine di sfondo alla finestra.

Funziona, purché i div all'interno siano più piccoli della finestra. Se si scorre verticalmente, l'immagine di sfondo non riempie più la pagina e mostra invece un'area bianca/grigia.

Quindi la mia domanda è: come posso combinare un'immagine di sfondo al 100% con il contenuto a scorrimento? Questo è il mio CSS:

html { 
    height: 100%; 
    margin:0px; 
    background-color:#999999; 
    background-image: url(http://s22.postimg.org/e03w9stjl/main_bg.png); 
    background-position:center; 
    background-repeat:no-repeat; 
    background-size: cover; 
} 
body { 
    min-height: 100%; 
    margin:0px; 
} 
#appcontainer { 
    position: absolute; 
    background-color: rgba(255, 255, 255, 0.7); 
    width:560px; height:2220px; 
    left:20px; top:20px; 
}

E HTML:

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 

    <div id="appcontainer"> 
     This div causes the background image to stop scaling to the page. 
    </div> 

</body> 
</html>

fonte

2013-10-14 Kokodoko

Usa background-attachment: fixed;

Demo

html { 
    height: 100%; 
    margin:0px; 
    background: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg) no-repeat center center; 
    background-size: cover; 
    background-attachment: fixed; 
}

Inoltre, non ho avuto il motivo per cui si sta utilizzando position: absolute; sull'elemento involucro, generalmente si dovrebbe utilizzare position: relative;

fonte

2013-10-14 15:43:57

Grazie, sta funzionando ora :) Perché usare relativa al posto di assoluto? – Kokodoko

@PietBinnenbocht Questo è il concetto di posizionamento dettagliato di lil, leggi alcuni articoli e otterrai il mio punto, perché non usare l'assoluto, perché la cosa che stai facendo non sembra essere necessario usare assolutamente :) –

#appcontainer { 
     position: absolute; 
     background-color: rgba(255, 255, 255, 0.7); 
     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; 
     top: 0; 
     right 0; 
     left: 0; 
     bottom 0; 
    }

fonte

2013-10-14 15:44:51

ti manca il punto e virgola sulla destra e in basso – kofifus

Aggiungi alla tua CSS:

background-attachment: fixed;

fonte

2013-10-14 15:46:44 gvee

Come utilizzare l'immagine di sfondo al 100% CSS con contenuto scorrevole?

risposta

Problemi correlati