Background colour for different pages

[johnrooney]

Hi Guys,

I’m looking to have one colour as a background for my homepage, and another colour for all the other pages. How would I do that in CSS, obviously you can change the colour in the global CSS in Customizer, but I want to have the homepage with a white background.

[ruenel]

Hello There,

Thanks for writing in! To resolve your issue, please set the global background color first in the customizer or in X > Launch > Options > Layout & Design > Background Options. This setting will be the global background color.

To change the background color for your homepage, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

body.home {
  background-color: white !important;
}

Only the homepage will have a white background using this code.

Please let us know how it goes.

[johnrooney]

@RueNel

body.home {
background-color: white !important;
}

Hi Guys,

I appreciate you looking into this, but that code didn’t effect the homepage’s background colour. Any other suggestions?

[nico]

Hi @johnrooney,

Thanks for writing in.

The access you share is not working or incorrect.

To change the background color for homepage only, first, identify the page id or use the homepage class because it is the hompage. Then add this code in your custom CSS:

.home-page body{
    background:black;
}

or

.page-id-3034 body{
     background:black;
}

Locate post or page id guide

How to Locate Post IDs | Themeco Docs

Hope it helps.

Let us know how it goes.

Thanks.

[johnrooney]

@RueNel

body.home {
background-color: white !important;
}

Hi Guys,

Thank you so much, that worked a treat!

[john]

Hey,

You are more than welcome!