Posted by Keith Hofgartner on

I am using a '5 area' as the template for a page and wanted to have a consistent background colour on each area. Currently I have a gap between the 'Top' area and the other 'Areas'

https://www.winslowbigsocietygroup.info/what-we-do/

Is there a way of making the backgrounds join seamlessly?

Or is there a way of setting a global background for the whole page?

When will the 'transparency option' be available for a backround image?

Posted by Joe Oldak on

There are margins in the standard templates - e.g., below the navbar and between top/content sections.

Generally speaking this is good, because we don't want content touching the navbar. But in the case of using the Background includelet it does mean you're left with a gap below the navbar.

One sneaky fix for this is to give the background includelet a -20px margin (i.e., negative 20px). This will mean the background closes the 20px gap below the navbar.

You might then want to add a 20px padding at the same time, so that the contents of the coloured area aren't too close to the top.

As for adding a colour to the entire page - there is no theme option to do this, but a bit of custom CSS is easy to add. e.g., in the Raw Header HTML in the theme options you could add something like:

<style>
body {
  background-color: #f7ffec;
}
</style>

Hope this helps!

Joe