`‘s to some degree of success. As For what I _have_ been able to accomplish, it is, as will be shown shortly, a bit of a process! The features I am introducing are attractive, however, and it occurs to me that these options might actually be popular if offered out-of-the-box with Czr. So, if you’ll be so kind as to tolerate it, Imma give y’all the breakdown of what I’ve been frankensteining with Czr, in the hopes that like-minded folks can duplicate the same features on their own WP/Customizr site using these steps, and especially that native Czr functionality can at some point in future be included to accommodate at least some of these features =). * **Measures taken:** 1. **Introduce the background image:** * - Modify the Czr `functions.php` file to re-establish native WP support for a custom background image, thus – * - added – - ``` $defaults = array( 'default-image' => '', 'default-preset' => 'fill', // 'default', 'fill', 'fit', 'repeat', 'custom' 'default-position-x' => 'left', // 'left', 'center', 'right' 'default-position-y' => 'top', // 'top', 'center', 'bottom' 'default-size' => 'cover', // 'auto', 'contain', 'cover' 'default-repeat' => 'no-repeat', // 'repeat-x', 'repeat-y', 'repeat', 'no-repeat' 'default-attachment' => 'scroll', // 'scroll', 'fixed' 'default-color' => 'ffffff', 'wp-head-callback' => '_custom_background_cb', 'admin-head-callback' => '', 'admin-preview-callback' => '', ); add_theme_support( 'custom-background', $defaults ); ``` - after – `require_once( get_template_directory() . '/core/init-base.php' );` * – in order to automagically inject a `class` declaration into the Czr `` tag, as well as certain related CSS properties into the preloaded Czr stylesheet… - … and then added – - ``` body.custom-background { background-position: center 115px !important; } ``` - in ‘Advanced Options/Additional CSS’ in order to override the CSS `background- position` property declaration established by the `custom-background` function, with the intent that the new body background image isn’t decapitated by the Czr header. _(Doubtless this last item can be dealt with by the Czr authors in future releases by adding to/modifying the available property tweaks available thru the ‘Background Image’ tab in customizer;)_ - This _will not_ apply in every instance, but since I wanted my background image to be seen in all its width, my selected theme customizer ‘Background Image’ settings (‘Preset’ adjusted to ‘Custom’, Image Position glued to top center, ‘Image Size’ adjusted to ‘Fit to Screen’, ‘repeat Background Image’ unchecked, ‘Scroll with Page’ checked), naturally introduced a gap to deal with above the footer when page lengths exceeded the height of the image. In order to accommodate this visually, I first did some image editor artwork, altering the bottom five or ten per-cent of my background image using a opaque- to-transparent gradient tool to create the effect of fading it out at the bottom edge of the image; then, back in the WP theme customizer ‘Colors’ tab, I selected an appropriate background color, matching the opaque color setting of my image editor’s gradient tool. Designers can avoid this extra work by simply adjusting the ‘Preset’ or ‘Image Size’ settings in the theme customizer‘ Background Image’ tab to ‘Fill Screen’, or even select the ‘Repeat Background Image” checkbox in that same tab panel. * **Create the full-width header and footer, size the main content container:** - In ‘Global settings/Site Layout’, adjust ‘Site layout’ to ‘Wide’, adjust ‘ Header topbar layout’ to ‘Wide’, adjust ‘Main Header section layout’ to ‘boxed’( try to mirror main content wrapper width, addressed more particularly below with CSS), adjust ‘Footer Credits section layout’ to ‘Wide’ – all in order to establish header and footer widths natively with the theme customizer; - Add the following declarations to ‘Advanced options/Additional CSS’ – - ``` div#main-wrapper { background-color: rgba(255, 255, 255, 0.8); margin: auto; width: 85%; } .tc-header .container { max-width: 85%; min-width: 85%; } header.tc-header { margin-bottom: 2em; } footer#footer { margin-top: 2em; } ``` - – in order to squeeze the main container element down a notch to prevent its covering the `` background image entirely (I’d like to see a chance to change the main container width in the ‘Global Settings/Site layout’ panel of Czr’s customizer, as this would accomplish at least the width restriction natively). _( ***Note: I added the top and bottom gaps because I liked the look — it was necessary to style the_ `

` _and_ `