How to change background color in a WordPress website?

How to change background color in a WordPress website?

Setting a fine background for the pages of a website is important in web design. 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 in a page



  • Different sections in a page, so you can create a 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 background in 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:


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 color. 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 the 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 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:



Contrast between Background and Text


For the content in a page to be legible, you have to ensure an optimal contrast between content colors and background color is maintained. The optimal standard is defined by the contrast ratio and it is expressed by specific values.

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

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



Leave a Reply

Your email address will not be published. Required fields are marked *