[CSS] Simple parallax [Code + Demo]

This code implements a simple parallax section with only CSS, no Javascript needed. The idea is that an image will be set as the background image of a section with fixed position, so that when people scroll down, the image stays fixed. The section should have a width defined.

There is an overlay layer on the image which we can put a darker color on the image. Text is horizontally and vertically centered, written on top of the overlay layer, so it is visible and not affected by the overlay.

HTML page (with Bootstrap included):

<section class="transparent">
  <div class="overlay"></div>
  <div class="overlay-text">
    <div class="container">
      <div class="row">
        <div class="col-md-8 offset-md-2">
            <h1>This is the page title</h1>
        </div><!--col-md-->
      </div><!--row-->
    </div><!--container-->
  </div><!--overlay text-->
</section>

CSS file:

html, body {
  margin: 0;
  padding: 0;
}
section.transparent{
  position: relative;
  background: url('path/to/image') no-repeat fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  height: 500px;
}
.overlay{
  position: absolute;
  background: rgba(0,0,0, 0.3);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.overlay-text{
  position: absolute;
  color: #fff;
  text-align: center;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

The downside of this, as far as I notice, that the background image does not stay fixed on mobile.

Result with HTML and CSS with a valid image:

[CSS] Simple parallax [Code + Demo]

Recent posts

[WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

Mangools Review: A Productive SEO tool for The Affiliates

[Vue.js] 8 months into Vue and what I like about it

Recent posts

Reader Interactions

Leave a Reply Cancel reply