All geek questions in one place

Multiple stills in full screen with Bootstrap 3.0

I am trying to build a static webpage using Bootstrap 3.0.

The page is basically a narrative and consists of a series of sections divided with each other with background images, with text and other images / elements superimposed on top.

I've been

The page is intended only for scrolling from top to bottom, and each background image of the section should fill the horizontal width.

Later I will also add parallax with images using Skrollr ( https://github.com/Prinzhorn/skrollr ).

However, right now, I'm struggling to work with HTML / CSS using Bootstrap.

At first I thought I could do something like this:

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

and then in 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; }

However, background images are not visible - the # first element is 1140px x 0px, so the image is not displayed.

I suspect that I am using tag types incorrectly - any suggestions on how I can get the above layout working with Bootstrap?

+6
source share
1 answer

Your layout for the grid is incorrect, you should look at examples from documents, basically .row should be a container element, also if you want the background to cover the entire page, then you cannot have sections inside the container, this is what I suggest:

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

Although you can use a larger range size for your content, because I believe that col-md-4 will be too small, but you need to decide :)

+5
source

Source: https://habr.com/ru/post/953378/

More articles:


All Articles