How To Add A Background To Your Wordpress Blog

WordPress background images

Setting a fine background for the pages of a website is important in web design. We'll show you how to change background color in WordPress. As the background can enhance a website expressiveness, and better emphasize content.

Different designs based on different uses of background colors

You can change color for:

A section on a page

Different sections in a page, so you can create symmetry and ensure color balance in the website

The whole surface of the website pages

Different website types based on various background types you'll select

The type of background you opt for will determine, in part, the website type you'll want to create.

Thus, you can apply the following, for the background of your website pages:

Simple color (you can adjust colors, so they match the overall design)
Gradients (you can customize gradients so they best batch the website design)
Images (you can choose to show a full-screen image, repeat image in the background, center it, etc)
Videos (you can opt for including a video you'll upload from your device, or you can provide the link to an external video source).

In case you build the website in WordPress, you have to select a theme that has such features included in the options package. Thus, you can apply different backgrounds to different sections, and to distinct pages entirely, depending on your website design guidelines.

If you carefully choose the theme, you'll have options for customizing the background to your wishes, and in accordance with your web design guidelines. Thus, you can change colors any time and also switch to a different background type when you want, if you deem it more appropriate to use a different color/image/gradient/video.

How to change the background (color) on a WordPress website

We chose Mesmerize to show how you can change the background of WordPress sites. This theme has comprehensive features for changing background colors, images, gradients, so we deem it appropriate to use it as an example theme:

Background Image

In the WordPress Dashboard, go to Appearance -> Background.

You'll be taken to the Customizer, where you'll adjust most of the settings for your newly created website.

You have the General Settings section open in the Customizer. Go to Background Image.

Upload an image from your computer:

If you like abstract images as background here's where you can find all sorts of collections, from backgrounds that focus on a single color (eg: yellow backgrounds), to 3D or textured ones.

Background Color

In the Customizer, go to General Settings -> Colors -> Background Color.

Click on Select Color to choose the color of your liking, and adjust its parameters (brightness, saturation, and shade).

You can choose the background color based on the previous selection of primary and secondary colors. The website color scheme, for the entire website, can be adjusted by a careful selection of colors from this subsection of General Settings in the Customizer.

Advanced Customizations for Website Background

Adjust color properties

A good theme will allow you to adjust all color properties, namely:

Brightness
Saturation
Shade

By clicking on the color box, you have to place the pointer on the exact color you want, with appropriate luminosity, saturation and shade (as you can see in the image above).

Lightness, or brightness, refers to the amount of white contained by a color. In technical terms, lightness is identified as the "value" of a color.

The shade of a color refers to how dark it is. It is a combination of a hue and black.

Color saturation refers to the intensity of color in an image. It is the expression of the bandwidth of light from a source.

For more details about colors and their components, please see this article.

Adjust the opacity/transparency of the background color

If you've chosen a rich feature theme, you'll be able to set the opacity/transparency of the background color.

By choosing a value on the slider corresponding to the color you have selected, you can decide on having a more transparent color or an opaquer one.

From here, you adjust how the text included in the section will be displayed. Values on the slider help you set an optimal contrast between the content of a section and the background onto which it is placed.

The result will be increased legibility, which makes users easily get the message and purchase products/offers from your website.

Apply Background Overlay for your Website Pages

Overlay is a semi-transparent color that is applied on top of the background, to obtain a nice visual effect. It can give an elegant, stylish look to the web page, and it can make a difference between a common design and a classy one.

In a theme with multiple settings for the background, you'll find the option to apply an overlay to the background color/image. If you don't want an overlay, you simply leave the option set to default (that is 100% transparency of the overlay, or no overlay activated for the page/page section).

This is an example of how you can customize the background overlay:

Use Contrast Between Background and Text

We showed you how to change background color in WordPress. There's still another aspect to take into account. For the content in a page to be legible, you have to ensure an optimal contrast between content colors and background color. The optimal standard is the contrast ratio and it has specific values.

According to Web Content Accessibility Guidelines, a minimum contrast ratio of 3:1 is required for a text that's larger than 18px.

Consider this standard and you'll get good scores for legibility.