Site Background (Color, Pattern, and Image)

This article was last updated on the January 2, 2017.

X makes it incredibly easy to set custom background colors, patterns, and images for your site. Since each Stack within X functions like a theme within a theme, it is important to remember that these different Stacks will have slight variations in how certain features is implemented. The aim of this article is to explain the difference between these three options and how they are used across each Stack.

Where to Find the Background Options

To find the site-wide background options in your WordPress installation, you’ll first need to open the Customizer, which can be found in the admin menu. Once you have opened up the Customizer, you will find the Background Options sub-heading beneath the grouping of Stack-specific options. For example, if you have selected the Integrity Stack to use on your site, you will see a collapsible section in the Customizer labeled Integrity, which is where you would find this section. If you were to change your selection to Renew, you should notice that the Integrity section will be replaced by a new section called Renew, which is where you would find the options specific to this Stack. It is important to remember this as the background options you set in one Stack will not carry over to another.

The Background Options

As stated above, it’s incredibly easy to set your background color, pattern, or image for your site with these settings in the Customizer. Below, we’ll go over each of these settings in a little more detail in an effort to explain how to utilize them.

Background Color

This setting is pretty self-explanatory as it is used to set the background color for your Stack. Clicking the Select Color toggle will reveal a color-picker, which allows you to manually enter in a hex code for your color or drag a selector around to find the particular shade you’re after. You can also adjust the saturation of your colors as needed.

Background Pattern

The Background Pattern setting is intended to be used with repeatable background images. A great resource to check out for repeatable background images is Subtle Patterns, which features a very large library that you can browse and make selections from. Uploading an image to this field will “override” the Background Color setting in the sense that the image will appear on top of your color. That being said, the color selected will still be present beneath the image. Because of this, you can create some very cool effects by stacking colors with transparent background images, allowing the texture of the image and the color of your site to blend together in a very pleasing manner.

Background Image

The Background Image setting is intended to be used with fullscreen images. The best usage of this feature would be for photography or large pieces of artwork that you want to display in their entirety. If this setting is in use, it will take precedence over the Background Color and Background Pattern Settings. Additionally, you can set a fade effect for these images by taking advantage of the Background Image Fade setting. The value entered into this field is interpreted as a time (in milliseconds) that it will take your image to fade in on page load. For example, if you wanted your image to fade in over a one second timespan, you would enter in 1000 into this field since 1000 milliseconds is equal to one second. Should you wish to not use this effect, setting the value of this field to 0 will bypass it completely.

Stack Differences

As stated above, since each Stack within X functions like a theme within a theme, it is important to remember that these different Stacks will have slight variations in how certain features is implemented. This section in particular will address those variances in implementation.

Integrity

The Integrity Stack works pretty much as expected. Whether or not you have “Fullwidth” or “Boxed” selected for your Site Layout option underneath each Stack section in the Customizer, the values inputs that you utilize for your background settings will always display.

Renew and Icon

Both Renew and Icon are slightly different in how these features work due to the specifications of their designs. Both of these Stacks and all of their elements (i.e. typography, shortcodes, accents et cetera) were designed with a white background in mind. For instance, it would be very difficult to read your content if you had plain text sitting on top of a very complex background image, or the accents implemented that work well with a white background might not look as good with a strong background color such as a red or yellow. Due to these realities, all content for these Stacks sits on top of a foundational element (i.e. <div class=“site”>) with a permanent white background applied to it to ensure that everything remains legible and easily viewable by your users.

What this ultimately means is if you have “Fullwidth” selected as your Site Layout, you will not be able to see any changes made to your background due to the fact that this <div class=“site”> element is in place. However, if you select “Boxed” you will notice all of your changes being implemented on either side of your content as this element will no longer be spanning the entire width of the browser window. That being said, if you would like to alter the color of this <div class=“site”> element, you can easily do so with a little bit of CSS:

body .site {
  background-color: #fafafa;
}

Alternately, you could add a background pattern to it should you desire:

body .site {
  background: #fafafa url(http://yourdomain.com/path/to/your/image.png) center top repeat;
}

And finally, you could implement a fullscreen image if needed:

body .site {
  background: #fafafa url(http://yourdomain.com/path/to/your/image.jpg) center center no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}

Do note that altering the look of the <div class=“site”> element will likely mean that you need to make additional updates to various elements throughout these Stacks as they are intended to be viewed upon a white background as stated above. These particular nuances are simple realities of working with a detailed product like X as each Stack aims to function like a theme within a theme. We hope that you have found this article informative and helpful in providing some clarity with regards to this feature.