{"id":9297,"date":"2023-12-13T04:38:36","date_gmt":"2023-12-13T04:38:36","guid":{"rendered":"https:\/\/www.youstable.com\/blog\/?post_type=manual_kb&#038;p=9297"},"modified":"2025-11-22T04:48:38","modified_gmt":"2025-11-22T04:48:38","slug":"how-to-change-background-color-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.youstable.com\/blog\/how-to-change-background-color-in-wordpress","title":{"rendered":"How to Change Background Color in WordPress"},"content":{"rendered":"\n<p>Don&#8217;t you like the background colour of your theme? You can change the background color in a WordPress theme and customize it to enhance a website expressiveness, and better emphasize content because setting an attractive background color is important in web design. So let&#8217;s see how to change background color in WordPress<\/p>\n\n\n\n<p>In this article, we will learn how to change background color in WordPress.<\/p>\n\n\n\n<p>We can change the background color in WordPress in many ways, but we will cover only below methods<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>By Using WordPress Theme customizer.<\/li>\n\n\n\n<li>By Using Custom CSS<\/li>\n\n\n\n<li>Change Background Color for Individual Posts<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"why-change-the-background-color-in-wordpress\"><strong>Why Change the Background Color in WordPress?<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Changing the background color of your website can help personalize your website design, improve readability and better emphasize content.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can make a prominent landing page using a different background color which helps in highlighting your call to action (CTA) and increasing conversions.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Can use different background colors for different posts based on different categories like authors, comments etc <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"change-background-color-using-wordpress-theme-customizer\"><strong>Change Background color using WordPress Theme Customizer<\/strong><\/h2>\n\n\n\n<p>Here we will be using the WordPress Theme Customizer to change the background color.<\/p>\n\n\n\n<p>Follow the steps below.<\/p>\n\n\n\n<p><strong>Step-1.<\/strong> <strong>Open WordPress<\/strong><strong><br><\/strong>Login into your WordPress dashboard.<\/p>\n\n\n\n<p><strong>Step- 2. Customize Theme<\/strong><\/p>\n\n\n\n<p>Go to <strong>Appearance &gt; Customize<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/youstable.com\/blog\/wp-content\/uploads\/2021\/08\/2-1-edited-2.jpg\" alt=\"Change Background Colour in WordPress\" class=\"wp-image-3659\" width=\"772\" height=\"483\" srcset=\"https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/08\/2-1-edited-2.jpg 960w, https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/08\/2-1-edited-2-768x480.jpg 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/figure>\n\n\n\n<p><strong>For this article, we\u2019re using the Astra Theme.<\/strong><\/p>\n\n\n\n<p><strong>Step- 3. <\/strong>Open Colors<\/p>\n\n\n\n<p><strong>Global &gt; Colors &gt; Background<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"600\" src=\"https:\/\/youstable.com\/blog\/wp-content\/uploads\/2021\/08\/5-edited-1.jpg\" alt=\"\" class=\"wp-image-3663\" srcset=\"https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/08\/5-edited-1.jpg 960w, https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/08\/5-edited-1-768x480.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p><strong>Step- 4. <\/strong>Select Background Colour<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"600\" src=\"https:\/\/youstable.com\/blog\/wp-content\/uploads\/2021\/08\/6-edited-1.jpg\" alt=\"\" class=\"wp-image-3673\" srcset=\"https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/08\/6-edited-1.jpg 960w, https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/08\/6-edited-1-768x480.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p>Here you can select any colour\/gradient\/images as per your theme. Also, you can use the colour picker tool to pick any colour of your choice.<\/p>\n\n\n\n<p>When you\u2019re done with the changes, click the \u2018Publish\u2019 button or you can see the preview to see the new background colour in action.<\/p>\n\n\n\n<p>If you are using <a href=\"https:\/\/www.youstable.com\/cpanel-vps\" target=\"_blank\" rel=\"noreferrer noopener\">cPanel VPS Hosting<\/a>, you can easily change the background color in WordPress by accessing the theme customization options.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"change-background-color-by-adding-custom-css\"><strong>Change Background color by Adding Custom CSS<\/strong><\/h2>\n\n\n\n<p><strong>Step-1.<\/strong>&nbsp;<strong>Open WordPress<\/strong><\/p>\n\n\n\n<p>Login into your WordPress dashboard.<\/p>\n\n\n\n<p><strong> Step- 2.&nbsp;Customize Theme<\/strong><\/p>\n\n\n\n<p>Go to&nbsp;<strong>Appearance &gt; Customize<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"541\" src=\"https:\/\/youstable.com\/blog\/wp-content\/uploads\/2021\/08\/2-edited-1.jpg\" alt=\"change link color in wordpress\" class=\"wp-image-3628\" srcset=\"https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/08\/2-edited-1.jpg 960w, https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/08\/2-edited-1-768x433.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p><strong>Step-3. Open Additional CSS<\/strong><\/p>\n\n\n\n<p> Click on the&nbsp;bottom left side that says &#8220;<strong>Additional CSS<\/strong>&#8220;.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/youstable.com\/blog\/wp-content\/uploads\/2021\/08\/3-edited-2.jpg\" alt=\"\" class=\"wp-image-3634\" width=\"764\" height=\"478\" srcset=\"https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/08\/3-edited-2.jpg 864w, https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/08\/3-edited-2-768x480.jpg 768w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/figure>\n\n\n\n<p><strong>Step-4. Add code<\/strong><\/p>\n\n\n\n<p>&nbsp;Add the following code in the box that comes up but<em> <strong>make sure you don\u2019t delete existing CSS!<\/strong><\/em> and click on publish button at the top.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\nbody\n{\n   background-color: #FFFFFF;\n}\n<\/pre><\/div><\/div>\n\n\n\n<p><strong>Replace the background colour code with the colour code that you want to use on your website.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"change-background-color-for-individual-posts\"><strong>Change Background Color for Individual Posts<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We can change the individual blog post background color in WordPress.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For example, change the background color for posts in a particular category where news category posts can have different background colors compared to other articles or blogs.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"steps-change-the-background-color-for-individual-posts\"><strong>Steps change the background color for individual posts<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We need <strong>Post ID<\/strong> of the blog. For Post ID of any blog post, open the blog and then right-click to use the Inspect tool in your browser.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/youstable.com\/blog\/wp-content\/uploads\/2021\/11\/image.png\" alt=\"\" class=\"wp-image-4245\" width=\"739\" height=\"491\" srcset=\"https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/11\/image.png 900w, https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/11\/image-768x510.png 768w, https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/11\/image-810x538.png 810w\" sizes=\"auto, (max-width: 739px) 100vw, 739px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After getting the Post ID use the following custom CSS to change the background color of an individual post by replacing the post ID.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\n.post-104 {background-color: #D7DEB5;color:#FFFFFF;}\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>For adding custom CSS, please follow the steps below.\n<ul class=\"wp-block-list\">\n<li>Login into your WordPress dashboard.<\/li>\n\n\n\n<li>Go to&nbsp;<strong>Appearance &gt; Customize<\/strong><\/li>\n\n\n\n<li>Click on the&nbsp;bottom left side that says \u201c<strong>Additional CSS<\/strong>\u201c.<\/li>\n\n\n\n<li>Add your custome code at the bottom of the CSS.<\/li>\n\n\n\n<li>Click <strong>Publish <\/strong>button at top.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visit your blog post to see the new background color.<\/li>\n<\/ul>\n\n\n\n<p><strong>You may also like<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/youstable.com\/blog\/knowledge-base-2\/how-to-change-link-color-in-wordpress\/\" target=\"_blank\" rel=\"noopener\"><strong>How to change link color in WordPress?<\/strong><\/a><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/youstable.com\/blog\/knowledge-base-2\/display-breadcrumb-navigation-links-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">How to Display Breadcrumb Navigation Links in WordPress?<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/youstable.com\/blog\/knowledge-base-2\/how-to-add-expires-headers\/\" target=\"_blank\" rel=\"noopener\">How to Add Expires Headers To Your WordPress Website?<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/youstable.com\/blog\/knowledge-base-2\/how-to-remove-wordpress-version\/\" target=\"_blank\" rel=\"noopener\">How to Remove WordPress Version Number?<\/a><\/strong><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Don&#8217;t you like the background colour of your theme? You can change the background color in a WordPress theme and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6875,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[],"tags":[],"class_list":["post-9297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"acf":[],"featured_image_src":"https:\/\/www.youstable.com\/blog\/wp-content\/uploads\/2021\/11\/How-to-Change-Background-Color-in-WordPress-01.jpg","author_info":{"display_name":"YouStable","author_link":"https:\/\/www.youstable.com\/blog\/author\/youstable"},"_links":{"self":[{"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/posts\/9297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/comments?post=9297"}],"version-history":[{"count":2,"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/posts\/9297\/revisions"}],"predecessor-version":[{"id":13873,"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/posts\/9297\/revisions\/13873"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/media\/6875"}],"wp:attachment":[{"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/media?parent=9297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/categories?post=9297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.youstable.com\/blog\/wp-json\/wp\/v2\/tags?post=9297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}