{"id":3532,"date":"2022-05-19T13:55:37","date_gmt":"2022-05-19T13:55:37","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=3532"},"modified":"2022-05-26T12:23:06","modified_gmt":"2022-05-26T12:23:06","slug":"how-to-change-background-in-wordpress","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/","title":{"rendered":"How to change background color in WordPress websites? [UPDATE 2022]"},"content":{"rendered":"<p>So you want to change WordPress background colors.<\/p>\n<p>We heard you.<\/p>\n<p>Setting a fine background for the pages of a website is important in web design, because it can enhance a website expressiveness, and better emphasize content.<\/p>\n<p>In this article I&#8217;m going to show you how to:<\/p>\n<ul>\n<li>Change the background color of website sections,<\/li>\n<li>Add background images,<\/li>\n<li>Add background videos,<\/li>\n<li>Use gradients as backgrounds,<\/li>\n<li>Add overlays to backgrounds.<\/li>\n<\/ul>\n<p>We&#8217;ll be digging inside the Customizer and the Default WordPress Editor. So, let&#8217;s roll!<\/p>\n<p>&nbsp;<\/p>\n<h2>Making WordPress background changes inside the theme Customizer<\/h2>\n<p>Most popular WordPress themes come with custom background features, that allow you to change the background color, or even use videos, images, gradients as backgrounds.<\/p>\n<p>Yes, the theme will dictate what you can or cannot do in terms of background changes.<\/p>\n<p>If your theme is not rich in features, don&#8217;t worry, there&#8217;s a plan B: using WordPress plugins. We&#8217;ll talk abut this a bit later on this article.<\/p>\n<p>In this exercise I&#8217;m going to use two themes to show you how you can make WordPress background color changes, and more: Mesmerize and ColibriWP.<\/p>\n<p>At first I wanted to show you how to do this inside an official WordPress themes, such as Twenty Seventeen, Twenty Twenty, but I said &#8220;No&#8221;. These are very basic, not rich in features themes, and even changing text can give you a headache. Yeah, that would be an experience I would not recommend. These are not suitable for 2022, when there are all sort of products that allow you to create a website by drag and drop in a single interface.<\/p>\n<p>Now, when you do your own theme research, look for one that is rich in features, that doesn&#8217;t have many limitations, even with a free plan. If changing a background can be a pain in the ass, just skip it.<\/p>\n<p>&nbsp;<\/p>\n<p>First, let me show you how to install any WordPress theme.<\/p>\n<ol>\n<li>From the WordPress Dashboard, head over to Appearance &#8211; &gt; Themes.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10542\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Appearance-Themes.jpg\" alt=\"Appearance - Themes\" width=\"304\" height=\"190\" \/><\/li>\n<li>Go to &#8220;Add new&#8221;.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10543\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Add-new-theme.jpg\" alt=\"Add new theme\" width=\"575\" height=\"57\" \/><\/li>\n<li>Type the name of a theme in the Search bar.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10544\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Search-for-a-theme.jpg\" alt=\"Search for a theme\" width=\"1029\" height=\"692\" \/><\/li>\n<li>When you find the theme, click on &#8220;Install&#8221;.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10545\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Install-a-WordPress-theme.jpg\" alt=\"Install a WordPress theme\" width=\"808\" height=\"362\" \/><\/li>\n<li>Click on &#8220;Activate&#8221;.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10546\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Activate-WordPress-theme.jpg\" alt=\"Activate WordPress theme\" width=\"396\" height=\"418\" \/><\/li>\n<li>Click on &#8220;Customize&#8221; to enter the theme&#8217;s Customizer.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3>How to change WordPress background color in the theme&#8217;s Customizer using Mesmerize theme<\/h3>\n<p>I chose <a href=\"https:\/\/extendthemes.com\/mesmerize\/\">Mesmerize<\/a> to show how you can change the background of WordPress sites because this theme has comprehensive features for changing background colors, images, gradients, so it seemed a good example to start from.<\/p>\n<p>After going inside the Mesmerize Customizer you will notice a message saying: &#8220;Please Install the Mesmerize Companion Plugin to Enable All the Theme Features&#8221;. This means that in order to benefit of some extra features, Mesmerize will install a plugin for you that will enrich the Customizer. Most of the themes out there will proceed similarly. Because the basic WordPress Customizer has tons of limits.<\/p>\n<p>So, I&#8217;m going to activate the plugin, which is called Mesmerize Companion.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-10552 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Activate-Mesmerize-Companion-plugin.jpg\" alt=\"Activate Mesmerize Companion plugin\" width=\"342\" height=\"517\" \/><\/p>\n<p>Let&#8217;s start playing with some backgrounds, shall we?<\/p>\n<p>&nbsp;<\/p>\n<h4>Making WordPress background color changes to sections<\/h4>\n<p>Each page section inside Mesmerize has a settings icon in the upper-right. Let&#8217;s click on such an icon.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10548\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Change-WordPress-background-color-of-a-section.jpg\" alt=\"Change WordPress background color of a section\" width=\"1547\" height=\"670\" \/><\/p>\n<p>Notice the &#8220;Change background&#8221; option?<\/p>\n<p>Let&#8217;s select it and see what happens.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10554\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Change-background-color-in-Mesmerize-1.jpg\" alt=\"Change background color in Mesmerize\" width=\"635\" height=\"706\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>A window will show up on the left-hand side. Let&#8217;s go to &#8220;Background color&#8221; and click on the dropdown.<\/p>\n<p>You can either select a color from the theme&#8217;s palette, use the slider to pick a color, or paste the code of the color you want.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10555\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/choose-a-color-for-the-background.jpg\" alt=\"choose a color for the background\" width=\"563\" height=\"262\" \/><\/p>\n<p>You can use the slider shown below to adjust the opacity of the background color. You can decide on having a more transparent color or an opaquer one.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10561\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Background-opacity-changes.jpg\" alt=\"Background opacity changes\" width=\"494\" height=\"285\" \/><\/p>\n<p>Click on &#8220;Choose&#8221; when you&#8217;re done. Then save your page to go live with the background color change.<\/p>\n<p>I&#8217;m gonna go with a white background for my section, because I do love minimalist design and white space.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10556\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/White-background.jpg\" alt=\"White background\" width=\"1534\" height=\"617\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4>Working with background images and overlays<\/h4>\n<p>While we&#8217;re still making changes to our section background, let&#8217;s switch the background type from color to image.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10557\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Switch-to-image-background.jpg\" alt=\"Switch to image background\" width=\"267\" height=\"235\" \/><\/p>\n<p>Click on &#8220;Change&#8221; to head over to the Media Library and add an image, or upload one from your device.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10558\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Change-background-image.jpg\" alt=\"Change background image\" width=\"273\" height=\"333\" \/><\/p>\n<p>Click on the image, then click on &#8220;Select&#8221; in the bottom right.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10559\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Media-library-images-for-the-background.jpg\" alt=\"Media library images for the background\" width=\"337\" height=\"292\" \/><\/p>\n<p>Here&#8217;s how the background looks like at the moment.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10560\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Changed-image-background-on-WordPress-section.jpg\" alt=\"Changed image background on WordPress section\" width=\"1548\" height=\"633\" \/><\/p>\n<p>I will need to add an overlay so that the plant image won&#8217;t be so &#8220;in your face&#8221;. An 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. If you don\u2019t 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).<\/p>\n<p>Let&#8217;s go to background overlay and darken it a little.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10570\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Adjust-the-background-overlay.jpg\" alt=\"Adjust the background overlay\" width=\"531\" height=\"266\" \/><\/p>\n<p>Here&#8217;s the result:<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10571\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Darkened-background.jpg\" alt=\"Darkened background\" width=\"1550\" height=\"629\" \/><\/p>\n<p>Now, the font-color will need to be changed in order to have a proper contrast. But this is another story.<\/p>\n<p>&nbsp;<\/p>\n<h4>Working with background gradients<\/h4>\n<p>What if we go for a gradient instead of an image?<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10572\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Gradients-as-WordPress-backgrounds.jpg\" alt=\"Gradients as WordPress backgrounds\" width=\"266\" height=\"489\" \/><\/p>\n<p>There are several gradients available inside Mesmerize. Let&#8217;s click on &#8220;Choose gradient&#8221; to discover them.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10574\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Choose-background-gradient.jpg\" alt=\"Choose background gradient\" width=\"1576\" height=\"882\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>How to change WordPress background color in the theme&#8217;s Customizer using the Colibri theme<\/h3>\n<p>I wanted to show you two themes that manage to level up the Customizer. Colibri is newer than Mesmerize, and during the activation it recommends you to install the Colibri page builder. The page builder will actually put the Customizer on steroids, giving you a lot of design freedom.<\/p>\n<p>&nbsp;<\/p>\n<h4>Making WordPress background color changes to sections<\/h4>\n<p>Each page section inside Colibri has a settings icon in the upper-right. Let&#8217;s click on such an icon.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10575\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Change-WordPress-background-color-in-Colibri.jpg\" alt=\"Change WordPress background color in Colibri\" width=\"1542\" height=\"673\" \/><\/p>\n<p>You will notice an editing panel on the left, that will allow you to make all sorts of styling changes. This panel has more advanced options than Mesmerize. It is structured like this: Layout\/Content, Style, and Advanced. Background changes can be made inside Style and Advanced.<\/p>\n<p>Go to Background &#8211; Color and click on the colored rectangle.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10576\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Change-WordPress-background-color-for-a-section-inside-Colibri.jpg\" alt=\"Change WordPress background color for a section inside Colibri\" width=\"545\" height=\"721\" \/><\/p>\n<p>This will pop up a window with several color options:<\/p>\n<ul>\n<li>A list of colors from the current theme color scheme. You can pick a color from here, or even change the color scheme by going to &#8220;More schemes&#8221;,<\/li>\n<li>A slider that helps you pick the color you like,<\/li>\n<li>Fields where you can input your own HEX or RGB color codes.<\/li>\n<li>Slider to set up the color opacity. Opacity has values from 0 to 1, 1 meaning totally opaque. In the field that has an &#8220;A&#8221; underneath you can input a value for the opacity if you want. <img loading=\"lazy\" class=\"aligncenter size-full wp-image-10577\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Opacity-color-settings-in-Colibri.jpg\" alt=\"Opacity color settings in Colibri\" width=\"306\" height=\"444\" \/><\/li>\n<\/ul>\n<p>In the example above, the opacity is set to 0.51. The value is also reflected inside the opacity slider.<\/p>\n<p>When you&#8217;re done, just hit &#8220;Save&#8221;.<\/p>\n<p>I have chosen an orange shade from the color scheme, then set the opacity to 0.45.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10578\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Changed-WordPress-background-color-in-Colibri.jpg\" alt=\"Changed WordPress background color in Colibri\" width=\"1661\" height=\"593\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4>Working with background images and overlays<\/h4>\n<p>Let&#8217;s see how we can add a background image to a section, what do you say?<\/p>\n<p>Did you notice that below the color option you can change the background type to image?<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10580\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Use-images-as-a-WordPress-background.jpg\" alt=\"Working with background images and overlays\" width=\"339\" height=\"542\" \/><\/p>\n<p>Let&#8217;s click on the default background image in order to change it. You will be taken to the Media Library to choose an image, or upload one.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10581\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Select-an-image-for-the-background.jpg\" alt=\"Select an image for the background\" width=\"458\" height=\"302\" \/><\/p>\n<p>Here&#8217;s the result:<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10582\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Section-with-Background-image.jpg\" alt=\"Section with Background image\" width=\"1444\" height=\"279\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4>Working with background gradients<\/h4>\n<p>Let&#8217;s switch now from the background image type to gradient.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10586\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Gradient-backgrounds-in-Colibri.jpg\" alt=\"Gradient backgrounds in Colibri\" width=\"342\" height=\"580\" \/><\/p>\n<p>If you click on the gradient you&#8217;ll see several ones available, both in Colibri free and PRO.<\/p>\n<p>Now, you can decide whether the attachments should be fixed or scroll. I like it scroll, because it make me think of a parallax effect.<\/p>\n<p>&nbsp;<\/p>\n<h4>Overlays and parallax effect in Colibri<\/h4>\n<p>Now, with Colibri PRO you can toggle on the overlay and parallax options. I really love the <a href=\"https:\/\/colibriwp.com\/blog\/wordpress-parallax-your-complete-go-to-guide\/\">parallax effect<\/a>. It adds a twist to the page design.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10583\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Parallax-and-overlay-options.jpg\" alt=\"Parallax and overlay options\" width=\"343\" height=\"362\" \/><\/p>\n<p>Now, let&#8217;s toggle the overlay on.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10589\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Background-overlay-options.jpg\" alt=\"Background overlay options\" width=\"588\" height=\"250\" \/><\/p>\n<p>Here you can:<\/p>\n<ul>\n<li>Choose the color of the background overlay,<\/li>\n<li>Adjust the opacity of the overlay. The scale is from 0 to 1.<\/li>\n<li>Choose a shape overlay,<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10590\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Overlay-shapes.jpg\" alt=\"Overlay shapes\" width=\"239\" height=\"275\" \/><\/li>\n<li>Change the overlay type. You can go with color, gradient, or shape only.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4>Working with video backgrounds<\/h4>\n<p>In Colibri PRO you can also add a video as a background. The process is the same as for background images. Remember, we&#8217;re still at the section level.<\/p>\n<p>But we can change the background for a column as well. When you select a column you will recognize the same panel on the left. Let&#8217;s go to Style &#8211; Background &#8211; Background type and select video.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10591\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/WordPress-background-changes-for-a-column.jpg\" alt=\"WordPress background changes for a column\" width=\"837\" height=\"499\" \/><\/p>\n<p>If you click o the default video, you will be able to go to the Media Library and pick another video, or upload one.<\/p>\n<p>Don&#8217;t forget to save your changes!<\/p>\n<p>&nbsp;<\/p>\n<p>Now, the Colibri theme together with the Colibri page builder are a great combo that you can use to build or sort of pages. They give you space to be creative and the tools to make a remarkable site.<\/p>\n<p>But, if you&#8217;re using another theme, that has limitations when it comes to customizing backgrounds, you can overcome them using a plugin.<\/p>\n<p>&nbsp;<\/p>\n<h2>How to customize backgrounds using the Advanced WordPress Backgrounds plugin<\/h2>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10611\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/wpbackgrounds.jpg\" alt=\"wpbackgrounds\" width=\"1886\" height=\"617\" \/><\/p>\n<p><a href=\"https:\/\/wpbackgrounds.com\/\">This plugin<\/a> is easy to use, and it comes packed with several background types, such as c<span style=\"background-color: transparent;\">olor, i<\/span><span style=\"background-color: transparent;\">mage, s<\/span><span style=\"background-color: transparent;\">elf hosted video, Youtube, and Vimeo.<\/span><\/p>\n<p>It allows you to beautify your backgrounds with overlays an parallax effect as well.<\/p>\n<p>It integrates well with Gutenberg as well, which is a plus.<\/p>\n<p>Let&#8217;s install the AWB plugin.<\/p>\n<ul>\n<li>From the WordPress dashboard, go to Plugins -&gt;\u00a0Add New.<\/li>\n<li>Enter \u201cAWB\u201d as a keyword to find the plugin.<\/li>\n<li>Click on the &#8220;Install Now&#8221; button, then on &#8220;Activate&#8221;.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10612\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Install-Advanced-WordPress-backgrounds-plugin.jpg\" alt=\"Install Advanced WordPress backgrounds plugin\" width=\"573\" height=\"403\" \/><\/li>\n<\/ul>\n<p>Now, let&#8217;s open a page, and find out how to add a background using the plugin.<\/p>\n<ul>\n<li>In the Classic Editor, go to the AWB icon from the toolbar.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10614\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Use-the-Advanced-WordPress-background-plugin-in-the-Classic-Editor.jpg\" alt=\"Use the Advanced WordPress background plugin in the Classic Editor\" width=\"603\" height=\"249\" \/><\/p>\n<ul>\n<li>A popup will show up. Let&#8217;s configure it.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10615\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/AWB-shortcode.jpg\" alt=\"AWB shortcode\" width=\"556\" height=\"461\" \/><\/li>\n<li>Let&#8217;s select the background color type.<\/li>\n<li>Let&#8217;s pick a color by using the slider or by pasting an RGB color code.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10616\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Choose-a-background-color-using-Advanced-WordPress-Background-plugin.jpg\" alt=\"Choose a background color using Advanced WordPress Background plugin\" width=\"556\" height=\"465\" \/><\/li>\n<\/ul>\n<p>You can set up margins and paddings for the background inside the &#8220;Styles&#8221; option.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10617\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/background-spacing-styling-in-awb.jpg\" alt=\"background spacing styling in awb\" width=\"556\" height=\"463\" \/><span style=\"background-color: transparent;\">If you choose the image background type, you can enable the parallax option as well.<\/span><\/p>\n<p>If you&#8217;re using the Default Editor, this plugin will install a dedicated block that you can use. But I won&#8217;t go further into these details, because I have another recommendation for you when it comes to the Gutenberg Editor.<\/p>\n<p>&nbsp;<\/p>\n<p>For those of you that work in the latest WordPress experience, aka with blocks, here&#8217;s how you can make background changes.<\/p>\n<p>&nbsp;<\/p>\n<h2>Making WordPress background changes inside the Default Block Editor (Gutenberg)<\/h2>\n<p>Hate to break this to you, but inside the Default Editor you can&#8217;t do much styling. Everything is pretty basic. but, if you&#8217;re looking for a solution that gives more control over design in the block Editor, there&#8217;s an option at the end of this chapter. Stay tuned!<\/p>\n<p>&nbsp;<\/p>\n<h3>How to make WordPress background color changes for blocks<\/h3>\n<p>Now, the following blocks allow you to change the text and the background color:<\/p>\n<ul>\n<li>Paragraph<\/li>\n<li>Heading<\/li>\n<li>Button<\/li>\n<li>Cover<\/li>\n<li>Group<\/li>\n<li>Table<\/li>\n<li>Media &amp; Text<\/li>\n<\/ul>\n<p>I&#8217;m going to use the heading as our example. Let&#8217;s add one to a page.<\/p>\n<ol>\n<li>Go to the canvas to the place where you want to insert the block. Hover between the existing blocks until you see a \u201c+\u201d sign. Click on the sign.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10596\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Add-a-block.jpg\" alt=\"Add a block\" width=\"1146\" height=\"533\" \/><\/li>\n<li>A block inserter will open now. Type \u201cheading\u201d to find the heading block, then select the block.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10597\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Look-for-heading-in-the-block-inserter.jpg\" alt=\"Look for heading in the block inserter\" width=\"640\" height=\"484\" \/><\/li>\n<li>The inserted block looks like this.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10598\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/The-heading-block.jpg\" alt=\"The heading block\" width=\"486\" height=\"183\" \/><\/li>\n<li>Start typing the text for the heading.<\/li>\n<li>Head over to the block editing panel on the right and go to &#8220;Color&#8221;.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10599\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/The-heading-editing-panel.jpg\" alt=\"The heading editing panel\" width=\"256\" height=\"685\" \/><\/li>\n<li>Click on the tiny rectangle next to &#8220;Background&#8221;.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10600\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/WordPress-background-color-picker-for-blocks.jpg\" alt=\"WordPress background color picker for blocks\" width=\"262\" height=\"271\" \/><\/li>\n<li>Pick a color.<\/li>\n<\/ol>\n<p>And you&#8217;re done. You can repeat the flow for the rest of the blocks that allow backgrounds.<\/p>\n<p>Some blocks also allow you to add gradients as a background (eg: the buttons block).<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10601\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Gradients-as-backgrounds-for-blocks.jpg\" alt=\"Gradients as backgrounds for blocks\" width=\"318\" height=\"315\" \/><\/p>\n<h3>How to make WordPress background color changes for patterns<\/h3>\n<p>Now, let&#8217;s say you want to add a pattern to a page and then want to change its background color. How do you proceed? It&#8217;s as straight forward as above.<\/p>\n<p>Patterns are predefined block layouts, available from the patterns tab of the block inserter. Now, I showed you above how to open up the block inserter by hovering between the block on a page. There&#8217;s a second method.<\/p>\n<p>Look for the &#8220;+&#8221; sign in the upper-left, next to the WordPress logo.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10604\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/click-on-the-plus-sign-to-open-the-block-inserter.jpg\" alt=\"click on the plus sign to open the block inserter\" width=\"302\" height=\"96\" \/><\/p>\n<p>It will open a block inserter that has a list of blocks and a list of patterns. Let&#8217;s go to &#8220;Patterns&#8221;. there are several categories that you can choose from: headers, footers, gallery, etc.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10605\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Gutenberg-patterns.jpg\" alt=\"Gutenberg patterns\" width=\"324\" height=\"715\" \/><\/p>\n<p>You can:<\/p>\n<ul>\n<li>click on a pattern to add it to the end of a page,<\/li>\n<li>drag a pattern and drop it wherever you want on the canvas.<\/li>\n<\/ul>\n<p>I added a call to action.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10607\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/call-to-action-pattern.jpg\" alt=\"call to action pattern\" width=\"713\" height=\"262\" \/><\/p>\n<p>Let&#8217;s change its background color.<\/p>\n<p>Start by selecting the pattern.<\/p>\n<p><span style=\"font-weight: 400;\">The current call to action pattern is actually a group of blocks, containing:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A paragraph &#8211; \u201cGet in touch\u201d,<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A heading &#8211; \u201cSchedule a Visit\u201d,<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A button &#8211; \u201cContact us\u201d.<\/span><\/li>\n<\/ul>\n<p>This is why when you look at the block editing panel on the right, you&#8217; notice that you&#8217;re making edits to &#8220;Group&#8221;.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10608\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Change-pattern-background-color.jpg\" alt=\"Change pattern background color\" width=\"258\" height=\"578\" \/>Now, go to Color -&gt; Background to open up the color picker I showed you a bit earlier. You can pick a solid background color or a gradient.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10601\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Gradients-as-backgrounds-for-blocks.jpg\" alt=\"Gradients as backgrounds for blocks\" width=\"318\" height=\"315\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>I&#8217;m choosing one of the gradients. There&#8217;s a slider that I can use to adjust the luminosity of the gradient. I can also choose between the linear and radial types of backgrounds, as well as the angle for it. Here&#8217;s the result:<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10609\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/pattern-with-a-gradientbackground.jpg\" alt=\"pattern with a gradient background\" width=\"1616\" height=\"439\" \/><\/p>\n<p>Don&#8217;t forget to save your design!<\/p>\n<p>&nbsp;<\/p>\n<p>Now, I promised you that I have a better solution for you when it comes to have more control over design in the Default Editor.<\/p>\n<p>Introducing Kubio: the only block-based solution that you need when working in Gutenberg.<\/p>\n<p>Kubio is a website builder than works on top of Gutenberg.\u00a0 It actually levels up the Block Editor, enriching it with functionalities that will end up giving you complete freedom over website design.<\/p>\n<p>Kubio is compatible with all WordPress themes, but, at the end of the day, because of its flexibility, the theme won&#8217;t even matter.<\/p>\n<p>Now, let&#8217;s see how you can work with Kubio and customize backgrounds.<\/p>\n<p>&nbsp;<\/p>\n<h2>Customizing WordPress Backgrounds Using Kubio (the Free Block-based Page Builder)<\/h2>\n<p>Inside the WordPress editor, there are some already existing blocks. You can use them from any page or post level. Kubio will add some extra Gutenberg blocks in the blocks panel. If you go to the \u201c+\u201d sign in the upper-left corner, you\u2019ll see the block inserter. The default WordPress blocks have black icons, while the Kubio ones have blue &amp; green icons. The Kubio blocks are shown first.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10621\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Kubio-blocks.jpg\" alt=\"Kubio blocks\" width=\"411\" height=\"798\" \/><\/p>\n<p>The moment you add any block, you will notice a block editing panel on the right-hand side, with three layers: Layout\/Content, Style, and Advanced.<\/p>\n<p>Background changes happen inside &#8220;Style&#8221; and &#8220;Advanced&#8221; for most of the blocks you want to use.<\/p>\n<p>Now, we need to go to a page and edit it. The moment you install Kubio builder, when you hover over a page inside &#8220;All pages&#8221; you will see &#8220;Edit with\u00a0 Kubio&#8221; written beneath. click on it to enter the Editor to customize the page.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10622\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Edit-with-Kubio.jpg\" alt=\"Edit with Kubio\" width=\"1004\" height=\"398\" \/><\/p>\n<p>Now I&#8217;m adding a section with two column to the page.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10623\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Add-blank-section.jpg\" alt=\"Add blank section\" width=\"416\" height=\"105\" \/><\/p>\n<p>I use the &#8220;Add blank section button&#8221; at the bottom of the page, and select a two-column layout.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10624\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Select-section-layout.jpg\" alt=\"Select section layout\" width=\"684\" height=\"186\" \/><\/p>\n<p>From the &#8220;+&#8221; signs I&#8217;m adding a heading block and a buttons block.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10625\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Section-with-two-columns-in-Kubio.jpg\" alt=\"Section with two columns in Kubio\" width=\"1105\" height=\"497\" \/><\/p>\n<p>Now, here&#8217;s a re the steps for making background color changes for a section or block.<\/p>\n<ul>\n<li>Let&#8217;s start by changing the background for the whole section.\u00a0 After selectin the section, let&#8217;s head over to the block editing panel on the right. Next, let&#8217;s go to Style -&gt; Background -&gt; Background color.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10626\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/Editing-the-section-in-the-editing-panel.jpg\" alt=\"Editing the section in the editing panel\" width=\"297\" height=\"431\" \/><\/p>\n<ul>\n<li>Select the colored circle next to your option. A panel will open up that allows you to pick a color from the current color scheme or gradient from a color, pick a color from a slider, or just type in a desired color code in the \u201cHEX\u201d field. You can also switch to the RGB color mode if it suits you better from the dropdown arrow.\n<p class=\"wp-block wp-block-kubio-text position-relative wp-block-kubio-text__text style-AeNkMeNT1-text style-local-WuWSNwXsV-text\" data-kubio=\"kubio\/text\">You can also adjust the opacity of your color. The slider offers you values from 0 to 1, 1, meaning there\u2019s no transparency. You can always reset the color to transparent when you select the reset button.<\/p>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-10627\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/WordPress-background-color-panel.jpg\" alt=\"WordPress background color panel\" width=\"290\" height=\"595\" \/><\/p>\n<p>I chose a blue shade, with an opacity of 0.4.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-10628\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/My-background-color-changed-to-light-blue.jpg\" alt=\"My background color changed to light blue\" width=\"1270\" height=\"486\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The Kubio free plan allows you to use two background types: images and gradients. Inside the PRO plan you can also use video and slideshow as background.<\/p>\n<p>Inside the PRO plans you can also use overlays and the parallax effect.<\/p>\n<p>&nbsp;<\/p>\n<p>Now, did you notice that the options inside Kubio are a true upgrade to the Default Editor features?<\/p>\n<p>If you are new to WordPress, Kubio can be the builder that you need, in order to create a stunning website, by drag and drop, while having complete design freedom. You can even choose between a free and paid plans.<\/p>\n<p>&nbsp;<\/p>\n<h2>Wrap up<\/h2>\n<p>This was a long one, I know.<\/p>\n<p>Here&#8217;s what you&#8217;ve learned so far:<\/p>\n<ul>\n<li>How to make WordPress background changes inside the theme Customizer. We used two themes as examples. We discussed background colors, images, gradients, and more,<\/li>\n<li>How to work with the Advanced WordPress Backgrounds plugin<\/li>\n<li>How to customize backgrounds in the Default WordPress Editor,<\/li>\n<li>How to customize backgrounds using Kubio, a flexible and free block-based page builder that puts the Default Editor on steroids.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>[sibwp_form id=1]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So you want to change WordPress background colors. We heard you. Setting a fine background for the pages of a website is important in web design, because it can enhance a website expressiveness, and better emphasize content. In this article I&#8217;m going to show you how to: Change the background color of website sections, Add&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":10602,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[159],"tags":[359,360,76,358],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to change background color in WordPress websites? [UPDATE 2022] - ColibriWP Blog<\/title>\n<meta name=\"description\" content=\"Read about how to change background color in WordPress. Find out how to use images and gradients as backgrounds, as well as how to apply overlays.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to change background color in WordPress websites? [UPDATE 2022] - ColibriWP Blog\" \/>\n<meta property=\"og:description\" content=\"Read about how to change background color in WordPress. Find out how to use images and gradients as backgrounds, as well as how to apply overlays.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-19T13:55:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-26T12:23:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/pawel-czerwinski-vI5XwPbGvmY-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Belascu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/pawel-czerwinski-vI5XwPbGvmY-unsplash.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/pawel-czerwinski-vI5XwPbGvmY-unsplash.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"WordPress background color\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/\",\"name\":\"How to change background color in WordPress websites? [UPDATE 2022] - ColibriWP Blog\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/#primaryimage\"},\"datePublished\":\"2022-05-19T13:55:37+00:00\",\"dateModified\":\"2022-05-26T12:23:06+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\"},\"description\":\"Read about how to change background color in WordPress. Find out how to use images and gradients as backgrounds, as well as how to apply overlays.\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to change background color in WordPress websites? [UPDATE 2022]\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\",\"name\":\"Alina Belascu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"caption\":\"Alina Belascu\"},\"description\":\"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.\",\"url\":\"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to change background color in WordPress websites? [UPDATE 2022] - ColibriWP Blog","description":"Read about how to change background color in WordPress. Find out how to use images and gradients as backgrounds, as well as how to apply overlays.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to change background color in WordPress websites? [UPDATE 2022] - ColibriWP Blog","og_description":"Read about how to change background color in WordPress. Find out how to use images and gradients as backgrounds, as well as how to apply overlays.","og_url":"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/","og_site_name":"ColibriWP Blog","article_published_time":"2022-05-19T13:55:37+00:00","article_modified_time":"2022-05-26T12:23:06+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/pawel-czerwinski-vI5XwPbGvmY-unsplash.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Belascu","Est. reading time":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/pawel-czerwinski-vI5XwPbGvmY-unsplash.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/pawel-czerwinski-vI5XwPbGvmY-unsplash.jpg","width":1920,"height":1280,"caption":"WordPress background color"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/#webpage","url":"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/","name":"How to change background color in WordPress websites? [UPDATE 2022] - ColibriWP Blog","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/#primaryimage"},"datePublished":"2022-05-19T13:55:37+00:00","dateModified":"2022-05-26T12:23:06+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311"},"description":"Read about how to change background color in WordPress. Find out how to use images and gradients as backgrounds, as well as how to apply overlays.","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/how-to-change-background-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to change background color in WordPress websites? [UPDATE 2022]"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311","name":"Alina Belascu","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","caption":"Alina Belascu"},"description":"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.","url":"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/3532"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=3532"}],"version-history":[{"count":22,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/3532\/revisions"}],"predecessor-version":[{"id":10629,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/3532\/revisions\/10629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/10602"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=3532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=3532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=3532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}