Here we can setup the background for the body and the main content area.
An image selected in the “Background Image” control will become the main background image for the entire page. We can set “Background Attachment” to “Fixed” to make the image stay put while the user scrolls creating a parallax effect. Other setting like Background size, position and repeat can all be used to set a simple image for the background, or create a textured effect like bricks, paper and more.
NOTE: This will only show when there is no background color for the body, or the background color is set to some level of transparency (see below)
We can also set the background color for the page body. This becomes the page background. This will overlay any body background image set above. Click “Clear” on the color tool to remove the color and show the body background image (if set).
The alpha slider on the right of the color tool can be used to lower the transparency of the color to to reveal the body background image (if set). This can be used artistically to add a color overlay to the body background image. With this, we can add some color from our color palette to make the image appear more consistent with the site or just darken or lighten the image.
It is not common to want to use an image in the content area due to the fact that text has to sit directly on top of the image. This is usually going to make the text hard to read. There are times where a texture, like paper or wood, behind the text can create a nice effect. Even images can work if they have a strong color overlay so the image is not overly prominent. This theme provides a way to both add an image and a color overlay to the content area for these purposes.
NOTE: This will only show when there is no background color set for the content area, or the color is set to some level of transparency less than 100% (see below).
Set the background color for the content area of the page. This will overlay any content area background image set above. This color tool is a little different from the body color tool in that if we want to see the image set above, we can not simply click a “Clear” button to remove the color and show the image (assuming one is set). Read on to see how to accomplish this with the alpha slider.
The alpha slider on the right of the color tool can be used to lower the transparency of the color and reveal the content area background image (if set). This can be used to artistically to add a color overlay to the image or, if set to ‘0’, will show the image with no color overlay.