Section Overlay

With this block template, you can simply insert a background image and have a color overlay.


Section overlays for modern design,
made easy

Deploy modern static websites with Cornerstone page builder.
Easily add sections with overlays and other page elements
using our unique block templates.

Get them all now!

Most of the time, you’ll insert a background image within your section. And sometimes you wish that you could add a color overlay to your image with your color of choice. A common practice is to add the color overlay by editing the image itself. That process though is so tedious. You have to open an image editor and edit the image which would take several of your time. But then if you change your mind and change the background image, you have to edit the image again back in the editor.

With this block template, you can simply insert a background image and have a color overlay. And if ever you want to change the background, you can change it easily without having to edit your image. The color overlay is separate and independent to the background image. You can change the color overlay also.

Since Cornerstone doesn’t have the overlay feature by default, the color overlay effect can be achieve by adding a custom css.

Reminders:
Please always remember to add this as Block template layout.

The Instructions


1] Upload and insert the template as a block template.

2] Include the custom css in the Settings Tab > Custom CSS.

3] And Feel free to change the color of the background overlay. You can always use hex to rgba converter.

The CSS


I included a Google font in my css below because I want it styled a little bit. You can completely remove it if it is not necessary to your site’s design

@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,700';

#cs-content {
  font-family: 'Roboto', sans-serif;
}

#cs-content .overlay {
  position: relative;
  overflow: hidden;
}

#cs-content .overlay:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  

  /* add your background color overlay here */
  background-color: rgba(77, 154, 191,0.75);
}

And that’s all folks, I am hoping that this template has little effect and get you inspired in spicing up your sections.

Leave a Reply

Your email address will not be published. Required fields are marked *