Sto provando a creare una pagina Web statica utilizzando Bootstrap 3.0.Immagini di sfondo a larghezza intera multiple sovrapposte con 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.

I've

La pagina è solo progettato da scorrere da cima a fondo, e l'immagine di sfondo di ogni sezione deve riempire la dimensione orizzontale.

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

Tuttavia, al momento, sto lottando per ottenere il funzionamento HTML/CSS con Bootstrap.

Inizialmente, ho pensato che avrei potuto fare qualcosa di simile:

<body> 
<div class="container"> 
    <section id="first"> 
     <div class="row annoucement col-md-4 col-md-offset-4"> 
      <h1>The story of...</h1> 
     </div> 
    </section 
    <section id="second"> 
     <div class="row gallery col-md-4 col-md-offset-4"> 
      <!-- Image gallery boxes --> 
     </div> 
    </section 
</div>

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 #prima è 1140 px x 0 px, quindi l'immagine non viene visualizzata.

Sospetto che non utilizzi correttamente i tipi di tag - qualche suggerimento su come posso ottenere il layout sopra con il Bootstrap?

fonte

2013-09-07 victorhooi

tuo markup per il sistema della griglia non è corretta, si dovrebbe guardare the examples dalla documentazione, in fondo il .row dovrebbe essere un elemento contenitore, anche se si desidera che il fondo per coprire l'intera pagina, allora non si può avere sezioni all'interno del contenitore, questo è quello che io suggerirei:

<body> 
    <section id="first"> 
     <div class="container"> 
      <div class="row announcement"> 
       <div class="col-md-4 col-md-offset-4"> 
        <h1>The story of...</h1> 
       </div> 
      </div> 
     </div> 
    </section> 
    <section id="second"> 
     <div class="container"> 
      <div class="row gallery"> 
       <div class="col-md-4 col-md-offset-4"> 
        <!-- Image gallery boxes --> 
       </div> 
      </div> 
     </div> 
    </section> 
</body>

anche se si consiglia di utilizzare una dimensione arco più grande per il contenuto, perché credo che col-md-4 sarebbe troppo piccola, ma questo è per te per decidere :)

fonte

2013-09-07 09:00:55

Cool, è grandioso, le immagini si stanno rivelando ora =). L'unica cosa è: l'altezza viene impostata dagli elementi interni (ad esempio

La storia di ...

), piuttosto che le dimensioni dell'immagine di sfondo, quindi viene visualizzata solo una striscia sottile dell'immagine. C'è un modo per mostrare le dimensioni verticali complete dell'immagine di sfondo? (Ma scala ancora orizzontalmente per adattarsi). – victorhooi

a meno che non si imposta l'altezza della sezione all'altezza dell'immagine, in genere si imposterà una grande imbottitura nella parte superiore e inferiore delle sezioni per aumentarne la dimensione –

Aha, ho pensato che ci potesse essere un modo per adattarsi all'immagine verticalmente. Ok, quindi posso impostare 'width' o' padding-bottom' su #first, in modo che si adatti all'immagine di sfondo completa. 'width' sembra essere più facile, dato che l'ho appena impostato sulla foto e non ho bisogno di preoccuparmi di cosa c'è dentro - tuttavia, stai dicendo che dovrei usare' padding-bottom 'invece? – victorhooi

Immagini di sfondo a larghezza intera multiple sovrapposte con Bootstrap 3.0

risposta

La storia di ...

Problemi correlati