How to Add a Background Image to Layers Pages

FAQ  How To  Tutorials  Last Updated: Layers ver. 1.5 Time to Read: 2 minutes

layers

A typical page in Layers is made up of at least two…layers :) The HTML document for every webpage has a body background – the color you see in your browser window when nothing else is there. By default this is a dark gray. You just about never see this body background on a Layers site because each page has a page wrapper, but sometimes your page may not have enough content on it to fill the height of your browser window which causes the body background to show after the page wrapper ends prematurely.

In development terms, the page wrapper is the section with the wrapper-site CSS class and fills the entire page with a white color by default. The purpose of this page wrapper is to contain all of your page elements separately from the things that happen outside it, such as the mobile sidebar.

Finally, Layers widgets also have a background color. Layers pages are typically covered completely with the widget content, therefore the only time you might see the page wrapper show through is if you create large margins between widgets.

Under the Site Settings panel in the Customizer, you have a Colors panel where the body background color can be changed. In Layers Pro, this is under Site Settings  →General

Depending on your child theme or other styling, you may need to set this yourself using CSS to force the color to override.

Body Backgrounds

The following example sets a color and background image for the page wrapper that will appear behind your posts and page content. This code goes into the CSS panel of the Customizer, or your DevKit window.

Page Background

The following example sets a color and background image for the page wrapper that will appear behind your posts and page content. This code goes into the CSS panel of the Customizer, or your DevKit window.

Background Image File URLs

Background images may be uploaded to your WordPress Media Library, then the File URL copied from the right side of the image edit screen.

Replace file-url  in the code example with your own image url. This must be the full URL to the image. Example: http://www.yoursite.com/wp-content/uploads/yourimage.jpg

You will notice that elements such as the header, footer and title container on inner-pages have their own backgrounds. You must reset their background to transparent to get the underlaying image or color to show. You can do this most easily in the Customizer by typing transparent   into the background color option for these elements (Layers Pro, Child Themes) or copy the original style to your Custom CSS to set the color or transparency manually. The following example demonstrates how to add a white background on posts so they show up better over a background image:

 

You can enable the Transparent header in HeaderHeader Styling in the Customizer or see How to Make the Layers Overlay Header Transparent

Reference: title-banner

See also