Parallax
A banner with a fixed, blurred background image and centred content on top. Set the background image on parallax yourself.
| Class | Description |
|---|---|
parallax-container | Wraps the background and the content |
parallax | The background, 20em tall |
parallax.small | 15em tall |
parallax.medium | 26em tall |
parallax.large | 33em tall |
content | Content centred over the background |
<div class="parallax-container">
<div class="parallax small" style="background-image: linear-gradient(135deg, #e67e22, #9b59b6)"></div>
<div class="content"><h1>Content on top</h1></div>
</div>