Più immagini di sfondo a larghezza intera con Bootstrap 3.0

Sto cercando di mettere insieme una pagina web statica usando Bootstrap 3.0.

La pagina è fondamentalmente una narrativa e consiste in una serie di sezioni sovrapposte con immagini di sfondo, con testo e altre immagini / elementi sovrapposti in alto.

Io ho

La pagina è progettata per scorrere dall’alto verso il basso e l’immagine di sfondo di ogni sezione dovrebbe riempire la larghezza orizzontale.

In seguito, aggiungerò anche la parallasse con le immagini usando Skrollr ( https://github.com/Prinzhorn/skrollr ).

Tuttavia, al momento, sto cercando di lavorare su HTML / CSS con Bootstrap.

Inizialmente, pensavo di poter fare qualcosa del genere:

 

The story of...

</section
</section

e poi nel CSS:

  #first { background: url(img/1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Tuttavia, le immagini di sfondo non sono visibili: l’elemento #first è 1140px x 0px, quindi l’immagine non viene visualizzata.

Ho il sospetto che non sto usando i tipi di tag correttamente – qualche suggerimento su come posso far funzionare il layout sopra con Bootstrap?

Il tuo markup per il sistema di griglia non è corretto, dovresti guardare gli esempi dai documenti, in pratica il .row dovrebbe essere un elemento container, anche se vuoi che lo sfondo copra l’intera pagina allora non puoi avere le sezioni all’interno del contenitore, questo è quello che suggerirei:

  

The story of...

Anche se potresti voler usare una dimensione più ampia per il tuo contenuto, perché credo che col-md-4 sarebbe troppo piccolo, ma è per te che devi decidere 🙂