CODEWITHSUNDEEP
csstwitter-bootstrap-3parallax
Bill
Bill

Reputation: 2352

Parallax image with Bootstrap 3

I am building the parallax effect for background. A sample is here: http://codepen.io/bilalhaidar/pen/zNxOVV?editors=1100

As you can see the .container is collapsing because the .caption is absolute positioned and the .parallax is relative positioned. Hence, the text appears top without taking the effect of top: 50% setting on the .caption class.

How to make the text appear centered?

When not using Bootstrap classes (container and row) all works fine.

Thanks

Upvotes: 1

Views: 1673

Answers (1)

max
max

Reputation: 8667

The problem is that col-xs-12 div has no height and default Bootstrap style for columns is position: relative so your text is relative to div with 0 height (so top: 50% doesn't matter in that case).

You can reset styles for that column like this, so your text will be relative to the parallax div with min-height: 400px:

.parallax .col-xs-12 {
  position: static;
}

If you want to center it ideally you can add this:

.parallax .caption {
  transform: translateY(-50%);
}

CODEPEN

Upvotes: 2

Related Questions