How To Add Background Color To A Wordpress Page

Want to change background color in your WordPress website? There are various ways to do that. Here's everything you need to know about adding or changing background colors in WordPress.

What you lot'll larn in this tutorial:

How to change background colour in WordPress website globally (for all pages every bit posts)
How to modify groundwork color just in homepage of WordPress website
How to change background color just in specific WordPress pages or posts
How to set gradient groundwork colors in WordPress

Making whatsoever of these changes usually takes just a few seconds, and you don't need to install any additional plugins to exercise information technology. The changes are too non-destructive – you can hands utilise them without risk of breaking your website.

How to change background color in WordPress for all pages and posts

To set a groundwork color for all your WordPress website you demand to openCustomize page.

In that location are multiple means to ge to theCustomize folio. For example you tin go toAppearance >> Customizeusing WordPress admin panel. Or you can login to WordPress panel, and then get back to the frontend of the website.Customize push button will bear witness up at the top of any folio or post.

wordpress customize posts and pages On the left side you'll see Customizer card. Open upAdditional CSS tab.

wordpress add css code Once yous open the tab enter this lawmaking to the Additional CSS box:

          body {    background-color: pinkish; }

The result will show up immediately while you're entering the code.

wordpress change background color using css code You may want to choose more specific color for your background instead of main color names. That'due south likewise easy to do – you can replace color name with it'sHEX code.

HEX is 6 symbol code (with # in front) which can represent any color you like. For example,#FF0000 means ruby, #FFFFFF is white, #000000 is black, and then on. You can become HEX code for any color you desire using online colour pickers (like https://htmlcolorcodes.com/ ).

Most of WordPress themes have color pickers congenital-in. For example default WordPress themeTwenty 20-One has color picker inCustomize > Color and & Dark mode tab.

wordpress color picker Default WordPress theme likewise has a dedicated setting for background color, but not all WordPress themes take this option.

So how exercise you set background color using HEX code? Easily. Hither's the instance from the paradigm to a higher place which should exist entered toAdditional CSS tab:

          torso {    background-color: #d1e4dd; }

How to modify homepage background colour in WordPress

Irresolute simply homepage's background colour in WordPress is not complicated at all. All properly built WordPress themes use body classes. Every homepage has a class namedhome. And then everything you lot demand to exercise to modify but homepage background color is in this example:

          body.home {    background-colour: #d1e4dd; }

How to alter background colour only for specific post or page in WordPress

To change only specific page or post background color in WordPress you need to know couple of piece of cake tricks.

Start – you need to know the ID of that specific WordPress page or post. To find out chich page has which ID y'all need to become toPages >> All Pages in WordPress admin panel. Try to edit whatsoever page you desire, ant look at the folio link in the browser's URL. The part which shows ?post=[NUMBER] tells the page ID. In the instance you see that page ID is two.

how to find page id in wordpress The aforementioned rule applies if you want to know post ID. Y'all just need to open whatever post (Posts >> All posts), and look for the mail service ID in the URL.

To set up background only for specific page, you lot'll need to enter this code to Additional CSS tab (class: folio-id-[PAGE ID you lot found out from the URL]):

          body.page-id-ii {    background-colour: #d1e4dd; }

Setting background for specific post has a slight difference in the code (class: postid-[POST ID] ):

          body.postid-two {    background-colour: #d1e4dd; }

That's it – at present you know how to add together custom background color only to specific posts or pages in WordPress.

How to prepare gradient background color in WordPress

Setting gradient background colors in WordPress is as easy every bit setting a solid color. Yous just need some help from online CSS slope generators. For example – this one https://cssgradient.io/ :

online css gradient generator You can change the colors every bit you desire, and the tool will generate a custom background gradient code. Everything yous need to do is to enter it to WordPress the same way you entered solid colors – usingCustomize >> Boosted CSS:

          body {    background: rgb(131,58,180);    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); }

That's it – your WordPress gradient background is ready!