Building a site on twitter bootstrap 3.
I have a jumbotron with text, buttons, and a picture of myself. I want the picture of myself + the white div below to scroll up and over the jumbotron. I was able to get the white div to do so with z-index.
Visual representation of what I want
My problem is, how do I get the picture of myself to do the same? It’s inheriting properties from the containing div, and I can’t seem to override it.
-
The bottom of the image is being cut off by the white div, even if I put a higher z-index.
-
The image is fixed, doesn’t move when I scroll.
I would provide a codepen, but it would take me a while to make. Here’s the gist of the code:
<div class="jumbotron hero">
<div class="container">
<div class="row row-grid">
<div class="col-lg-7 col-lg-offset-0 col-md-6 col-md-offset-0 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 text-center" id="header-text">
<h1>Hi, I'm Giovanni.</h1>
<h3>I'm a Marketing Professional and Public Speaking Coach</h3>
<div class="btn-toolbar text-center" role="group" id="header-buttons">
<a href="#marketing" class="btn btn-lg btn-primary" id="primarycta">Marketing</a>
<a href="#publicspeaking" class="btn btn-lg btn-warning" id="secondarycta">Public Speaking</a>
</div>
</div>
<div class="col-lg-5 col-lg-offset-0 col-md-6 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-8 col-xs-offset-2 gio-image"><!--This is the image I want to move -->
</div>
</div>
</div>
</div>
<div class="container" id="scrollover">
<div class="row" id="marketing">
<div class="col-lg-10 col-lg-offset-1 text-center"><h1 class="bodyh1">Marketing</h1></div>
</div>
<div class="row">
<!-- Etc... -->
CSS:
.hero {
padding-top:140px;
height:600px;
min-height:400px;
background-size:cover;
overflow: visible;
position: fixed;
right:0;
left:0;
z-index:-1;
}
#scrollover {
position: absolute;
top: 70%;
z-index:2;
background: white;
width:100%;
}
2
Answers
I figured it out. I'm not sure if my approach is the right way to do it, but it works.
I took
and moved it in between the end of the jumbotron div and the beginning of the #scrollover container.
Then I used relative positioning to place it above and to the right of where it would naturally sit. I gave it a higher z-index so it would sit on top of both divs.
With this approach, I had to use some media queries to make sure it moved along with the rest of the page and didn't cover anything. But, overall, it works like a charm.
try giving a
position:fixed
to your.row
or.row-grid
class.You can also make it so that the
positiong:fixed
is added when you start scrolling down.Check this pen. I know it’s not the prettiest css, but it should give you a general idea of what I mean
EDIT
Try giving your image a
background-attachment:fixed;