misha312 misha312 - 6 months ago 10
CSS Question

container-fluid keeps going to background even whenz-index is set

Hi guys I try to implamant a very simple wey of design. I want that the first part of the page will be with fixed position and when I scroll, the rest of the page will overlay it just like on sites like popcoren time here is an exmple of site that uses that design . Well I started building something but It wont work because the container-fluid bg allways goes to back and wont overlay the fixed content.
what I managed to do but its ugly - I changed the bg color of each of the child divs (of the container-fluid) and it seems to be working but as I said I am sure this is not the correct answer.

here is my code:

<div id="bg_1" style="background-image:url(img/bg_1.png); background-repeat:repeat; background-attachment: fixed;background-size: 100% 100%; width:100%; z-index:-1; ">
<div style=" width:100%; font-family:Alef,sans-serif; color:#FFF;position:fixed; ">
<div class="jumbotron" style= "background-color:transparent; text-align: center; color:#FFF;">
<center> <h1>blah blah</h1> </center>
<center><h2>blah blah blah blah</h2></center>
</div>

</div>
</div>

<div class="container-fluid" style="background-color:#CE1E1A;"><!--icon and animation area -->
<div class="row" >
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-8 col-xs-offset-2">
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A; ">
<img src="img/icons/re_discover.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;" dir="rtl">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/meet_new_pl.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;">please help me</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/peek_logo.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me please help me please help me</span>
</div>
</div>
</div>
</br>
<hr />
</div> <!--end of container fluid -->

<div class="container-fluid" style="background-color:#CE1E1A;"><!--icon and animation area -->
<div class="row" >
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-8 col-xs-offset-2">
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A; ">
<img src="img/icons/re_discover.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;" dir="rtl">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/meet_new_pl.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;">please help me</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/peek_logo.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me please help me please help me</span>
</div>
</div>
</div>
</br>
<hr />
</div> <!--end of container fluid -->
<div class="container-fluid" style="background-color:#CE1E1A;"><!--icon and animation area -->
<div class="row" >
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-8 col-xs-offset-2">
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A; ">
<img src="img/icons/re_discover.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;" dir="rtl">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/meet_new_pl.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;">please help me</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/peek_logo.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me please help me please help me</span>
</div>
</div>
</div>
</br>
<hr />
</div> <!--end of container fluid -->


here is an example:bootply

Answer

try to change:

<div class="container-fluid"  style="background-color:#CE1E1A;">

to:

<div class="container-fluid"  style="background-color:#CE1E1A;position:relative;">
Comments