Trying to master Bootstrap, I've hit a roadblock. I managed to set up a parallax image in bootstrap, but every time I try to add additional content like a card or another image, it all falls apart.
If I could just overlay a div on the parallax, that would solve my problem.
Here's the code with text as an example (I'm aiming to add an image or a row):
<div id="parallax-image">
<section>
<div class="parallax-one">
<div class="text">
<h2>Heading</h2>
</div>
</div>
</section>
</div>
CSS
#parallax-image .parallax-one{
padding-top: 200px;
padding-bottom: 200px;
overflow: hidden;
position: relative;
width: 100%;
background-image: url(img/paralax_1.jpg);
background-attachment: fixed;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
Nothing fancy here except for a font family and alignment for .text. There's also a media query that adjusts paddings for smaller screens.
Edit I realized I can use negative margins based on the padding. By adding this to .text, I get a similar effect to what I want:
margin-bottom: -200px; margin-top: -140px
But I'm unsure if this approach might have any adverse effects.