Different background home vs. content pages

[Emily Eiben]

Hi Bill!

Is there a way to have a different background on the home page, than on all the other pages?

Thanks
Emily

[Bill Robbins]

Hello Emily,

Absolutely. WordPress gives us some hooks that we can use to make styling various parts of our sites differently. Here’s how to have a different home page background:

1. Set your background in the theme options to be the one you’d like to have on all of your other pages.
2. Next go to the Theme Options page and select the styling tab. Scroll down to the Custom CSS box and paste this:

   
   body.home {
        background-color: #cccccc;
   }
   

   Just replace the #cccccc with the color of the background you’d like to have on your home page. If you’d like to have an image background, then use this:

   
   body.home {
        background-image: url(https://yoursite.com/image.png);
   }
   

   Just replace the http://yoursite.com/image.png with the URL to the background image you’d like to use. You can find that by going to the Media section and then uploading it. Once the upload is finished, click Edit and on that screen on the right hand side, you’ll find the URL to that image.

3. You can combine them like this if you’d like to:

   
   body.home {
        background-color: #cccccc;
        background-image: url(https://yoursite.com/image.png);
   }
   

4. Update your settings.

That will give a different background for the home page, from the other pages.

If you have any questions or trouble, just let me know.

Thanks,
Bill

[Author]

Posts