Dotted overlays on color section

Hey AntonNovikov!

You add something like this for the color section:

.avia-section {
content: url('IMAGE URL HERE');
}

This will cover the background image that you set for the color section.

Best regards,
Ismael

Hi!

Thank you for correcting me. I’m sorry about that, I must have been tired when I posted that.

Anyway, you can apply a certain background overlay on a color section but first make sure that you added the theme support for custom css class. Edit functions.php, add this code right after line 16:

add_theme_support('avia_template_builder_custom_css');

This will give you the option to add a custom css class on any avia elements within the builder. So let’s get started, add a color section with the background image that you want then insert a text block inside the section. The overlay image will be added on the text block. Switch to the text/html editor mode then add this:

<img alt="" src="http://fc09.deviantart.net/fs71/f/2011/074/3/7/dotted_overlay_texture_by_nobren-d3bqt3w.png" />

Scroll a bit below to add a custom css class, we’re going to use section-overlay-background for example. After that save the options then publish the page. Add this on Quick CSS or custom.css to adjust the image overlay to full width and height covering the entire color section background:

.section-overlay-background {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  z-index: 0;
}

.section-overlay-background img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Reference link is here, look for technique number 2: http://css-tricks.com/perfect-full-page-background-image/

Cheers!
Ismael