Make header and footer background color transparent

On a most recent review, it seems you are using the ‘Striker’ theme. Perhaps you are just testing, but in order for us to help you, we need to be able to see the site using the theme this support forum section is related to.

Anyrecommendations/ suggestions on how to make header/ footer color transparent?
seems to be two pages css and dark color theme and cannot for the life of me figure it out.

I think you’re probably stuck because you’ve applied the background image to the wrong class.

I explained a bit about this mix up near the end of this post, and the actual ID/class that the background image should have been applied to.

/**
 * to apply these to light version,
 * just remove .colors-dark class 
 * from the codes below
 */

/* make entire page has no background */

body.colors-dark, 
.colors-dark .site-content-contain {
  background: none;
}

/* make main header section has no background */

.colors-dark .site-header {
  background: none;
}

/* make main footer has no background */
.colors-dark .site-footer {
  background: none;
}

And in case you want the main nav to have no background as well, add this:

/* make main-nav has no background */
.colors-dark .navigation-top, 
.colors-dark .main-navigation ul {
  background: none;
}

You’ll probably notice that the header and footer are now showing a white color instead of the image.

That’s because the image is applied to the .site-content class; that’s the wrong class if you want the background image to show on the entire page.

You need to apply your background image to either the #page ID or .site class.

/* remove background from .site-content */
.site-content {
  background: none;
}

/* add image background to page */
#page {
  background-image: url("/wp-content/uploads/2017/01/background.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

• This reply was modified 7 years, 2 months ago by ThePixelMe. Reason: point clarification
• This reply was modified 7 years, 2 months ago by ThePixelMe. Reason: added light-theme comment and some clarification
• This reply was modified 7 years, 2 months ago by ThePixelMe. Reason: fix spelling mistakes

In your admin panel, go to Appearance –> Customize.

Then in the customize menu, click on Additional CSS, which will bring out a box where you can copy-paste the code below into that box.

Copy-paste the codes below into that Additional CSS box and hit Save & Publish.

/**
 * to apply these to light version,
 * just remove .colors-dark class 
 * from the codes below
 */

/* make entire page has no background */

body.colors-dark, 
.colors-dark .site-content-contain {
  background: none;
}

/* make main header section has no background */

.colors-dark .site-header {
  background: none;
}

/* make main footer has no background */
.colors-dark .site-footer {
  background: none;
}

/* remove background from .site-content */
.site-content {
  background: none;
}

/* add image background to page */
#page {
  background-image: url("/wp-content/uploads/2017/01/background.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

See if that works for you.