skip to Main Content

How to add overlay to parallax section for twitter bootstrap?

Below is the code for parallax:


<div class="container-fluid">
<div class="ha-bg-parallax text-center block-marginb-none" data-type="background" data-speed="20">
    <div class="ha-parallax-body">
        <div class="ha-content ha-content-whitecolor">
            "Our main goal is to build a pixel perfect, one page parallax template with unlimited possibilities applicable for different businesses."
        <div class="ha-parallax-divider-wrapper">
            <span class="ha-diamond-divider-md img-responsive"></span>
        <div class="ha-heading-parallax">Spargo Team</div>


.ha-bg-parallax {
  background: url( 50% -195px no-repeat fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  height: 300px;
  margin: 0 auto;
  width: 100%;
  display: table;
  vertical-align: middle;

.ha-bg-parallax .ha-parallax-body {
  display: table-cell;
  vertical-align: middle;

.ha-bg-parallax .ha-content-whitecolor {
  font-size: 17px;
  color: #ffffff;
  width: 45%;
  margin: auto;

.ha-bg-parallax .ha-diamond-divider-md {
  margin: 15px 0px;

.ha-bg-parallax .ha-heading-parallax {
  font-style: italic;
  font-weight: bold;
  text-transform: none;
  color: #ffffff;
  padding-bottom: 0px;

  clear: both;


div.product-chooser.disabled div.product-chooser-item{
  zoom: 1;
  filter: alpha(opacity=60);
  opacity: 0.6;
  cursor: default;

div.product-chooser div.product-chooser-item{
  padding: 11px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  border: 1px solid #efefef;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10x;

div.product-chooser div.product-chooser-item.selected{
  border: 4px solid #428bca;
  background: #efefef;
  padding: 8px;
  filter: alpha(opacity=100);
  opacity: 1;

div.product-chooser div.product-chooser-item img{
  padding: 0;

div.product-chooser div.product-chooser-item span.title{
  display: block;
  margin: 10px 0 5px 0;
  font-weight: bold;
  font-size: 12px;

div.product-chooser div.product-chooser-item span.description{
  font-size: 12px;

div.product-chooser div.product-chooser-item input{
  position: absolute;
  left: 0;
  top: 0;


$(function () {
  "use strict";
  var $bgobj = $(".ha-bg-parallax"); // assigning the object
  $(window).on("scroll", function () {
    var yPos = -($(window).scrollTop() / $'speed'));
    // Put together our final background position
    var coords = '100% ' + yPos + 'px';
    // Move the background
    $bgobj.css({ backgroundPosition: coords });
  $('div.product-chooser').not('.disabled').find('div.product-chooser-item').on('click', function(){
    $(this).find('input[type="radio"]').prop("checked", true);

I want this to add overlay to parallax section. What changes should I make to display parallax with overlay?



  1. Chosen as BEST ANSWER

    Finally i solved my issue on my own.

    By adding div class of parallax-overlay in parallax html section

    <div class="parallax-overlay"></div> 

    and adding css properties in the parallax section

    .parallax-overlay {
    position: absolute;
    width: 100%;
    height: 800px;
    z-index: 2;
    background-color: #080d15;
    opacity: .7;

  2. Maybe I didn’t quite understand what you mean by fade form;

    did you try adding opacity to the div with the background-image?

    Something like:

    ha-bg-parallax {

    or maybe something like:

    div:after {
        content: "";
        background-color: #fff;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top