CODEWITHSUNDEEP
csstwitter-bootstrapbackgroundcarouselfixed
Jake Gabb
Jake Gabb

Reputation: 385

Making a bootstrap carousel's positioning fixed?

I'm trying to get my bootstrap carousel acting as the background in a fixed position. In my actual code I've got it to a full width and height that fills the screen, but it only stays in one place. I added 'position: fixed' to a class on my section containing the carousel so it'd float at the front and I was going to z-index it to behind the rest of my content, but it just completely disappears?

I've replicated the problem in this simplified example:

http://jsfiddle.net/v9FMw/4/

HTML

<div class="fill bg-green">
    <div>content section (scroll down)</div>
</div>
<div class="fill bg-white">
    <div>content section (further x)</div>
</div>
<div class="fill bg-green fixed-section"> <!-- fixed section declared here -->
    <-- carousel code -->
</div>
<div class="fill bg-white">
    <div>content section</div>
</div>

CSS:

.fill {
    width: 100%;
    height: 100%;
    position: relative;
}

.fixed-section {
    position: fixed; /* controls fixed carousel positioning here */
}

Upvotes: 1

Views: 5747

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9476

You have to give the container top: 0.

.fixed-section {
    position: fixed;
    top: 0;
}

Updated Fiddle

Upvotes: 2

Related Questions