Can I set a separate background color for the header, content and footer?

As you know, when you select a background for Unite, it becomes the background of the entire page. Does anyone know how to give the header, content and footer their own separate background colors?

Thanks in advance for any and all replies!

For content area it is easy but for header area it is slightly difficult and before you can proceed with custom CSS you need to edit header.php file. On that file find these lines of code:

<div id="page" class="hfeed site">
	<div class="container">

Now replace them with these lines:

<div id="page" class="hfeed site">
<div class="container header-area">

Now that you have a new class added for header area you can target it better using CSS. Add this code to Appearance >> Theme Options >> Other >> Custom CSS.

.site-content {
   background: #fff;
   padding: 40px 20px;
}

.header-area {
   background: #fff;
}

.navbar.navbar-default {
  margin: 0;
}

It will turn content background color to white but you can use any color you want.

Let me know if this is what you were looking for.

This is fantastic and very close to what I was looking for. Unfortunately, there is just a small area between the bottom of the nav menu and the beginning of content that isn’t white. It shows the background in this thin area separating the sections. I’ve attached a screen shot for your review.

Thank you very much for your assistance thus far! It is greatly appreciated!

This part of my given code had to fix that:

.navbar.navbar-default {
  margin-bottom: 0;
}

If it doesn’t work it means that there are some extra modifications for your theme and I will need to see your website URL to provide a proper solution.

That did fix it. I apologize, but when I looked back at what I had pasted in, it was missing that part. Now that it is there, it works wonderfully. Thank you again!