I'm currently in the process of constructing a static webpage utilizing Bootstrap 3.0.
This particular page follows a storytelling format, consisting of multiple sections stacked on top of each other with background images. Text and additional images/elements are then overlaid on these backgrounds.
My intention is for users to scroll from top to bottom, with each section's background image spanning the full width of the screen.
In the future, I plan to incorporate parallax effects using Skrollr (https://github.com/Prinzhorn/skrollr).
However, at this moment, I am encountering difficulties implementing functional HTML/CSS with Bootstrap.
Initially, my approach was 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>
Followed by the corresponding 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;
}
Unfortunately, the background images do not appear as expected - the #first element ends up being 1140px x 0px, resulting in the failure to display the image.
I have a hunch that I might be misusing tag types - any recommendations on how I can achieve the desired layout with Bootstrap?