Próbuję utworzyć statyczną stronę internetową za pomocą Bootstrap 3.0.Wiele obrazów tła o pełnej szerokości z Bootstrap 3.0

Strona jest w zasadzie narracją i składa się z serii ułożonych w stos sekcji z obrazami tła, z tekstem i innymi obrazami/elementami nałożonymi na wierzch.

I've

strona jest przeznaczona tylko być przewijane od góry do dołu, a każda sekcja jest obraz tła powinien wypełnić poziome szerokość.

Później dodam również paralaksę z obrazami za pomocą Skrollr (https://github.com/Prinzhorn/skrollr).

Jednak obecnie walczę o pracę z HTML/CSS przy pomocy Bootstrapa.

Początkowo myślałem, że mógłbym zrobić coś takiego:

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

a następnie w 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; 
    }

Jednak obrazy tła nie są widoczne - element #first jest 1140px x 0px, więc obraz nie jest wyświetlany.

Podejrzewam, że nie używam poprawnie typów tagów - jakieś sugestie, w jaki sposób mogę uzyskać powyższy układ pracy z Bootstrap?

Źródło

2013-09-07 victorhooi

Twoje oznaczenia dla systemu siatki są nieprawidłowe, powinieneś spojrzeć na the examples z dokumentacji, w zasadzie .row powinien być elementem pojemnika, także jeśli chcesz, aby tło obejmowało całą stronę, wtedy nie możesz mieć sekcji wewnątrz kontenera, to co sugeruję:

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

Choć może chcesz użyć większego rozmiaru rozpiętości do treści, ponieważ wierzę, kol-MD-4 będzie zbyt mały, ale to dla ciebie do podjęcia decyzji :)

Źródło

2013-09-07 09:00:55

Fajnie, świetnie, zdjęcia pojawiają się teraz =). Jedyną rzeczą jest - wysokość jest ustalana przez wewnętrzne elementy (np.

Historia ...

), a nie wymiary obrazu tła, więc widzisz tylko cienki pasek obrazu. Czy istnieje sposób na pokazanie pełnych pionowych wymiarów obrazu tła? (Ale nadal skaluj poziomo, aby zmieścić). – victorhooi

chyba że ustawisz wysokość przekroju na wysokość obrazu, zwykle ustawiasz dużą wyściółkę na górze i dole sekcji, aby zwiększyć ich rozmiar. –

Aha, myślałem, że może istnieć sposób dopasowania do zdjęcia pionowo. Ok, więc mogę ustawić "szerokość" lub "dopełnienie-dół" na #first, aby zmieściło się w pełnym obrazie tła. "szerokość" wydaje się być łatwiejsza, ponieważ po prostu ustawię to na zdjęcie i nie muszę się martwić o to, co jest w środku - jednak mówisz, że zamiast tego powinienem użyć "dopełnienia-dołu"? – victorhooi

Wiele obrazów tła o pełnej szerokości z Bootstrap 3.0

Odpowiedz

Historia ...

Powiązane problemy