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.

Hi there,

Yes I was testing a bit…sorry about. I switched it back. Trying to get everything I have w/ the striker theme onto Twenty Seventeen. Thanks.

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 8 years, 1 month ago by ThePixelMe. Reason: point clarification
• This reply was modified 8 years, 1 month ago by ThePixelMe. Reason: added light-theme comment and some clarification
• This reply was modified 8 years, 1 month ago by ThePixelMe. Reason: fix spelling mistakes

Hello Pixelme,

Thank you so much for your recommendations. Did not have much luck in applying them for some reason. Tricky theme to work with I suppose for someone like me..lol.(this would have been the 11th one I have done over the years). I greatly appreciate your help. Thanks again.

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.

Ahhhh..lol I was putting it in the child theme. My apologies and thank you!!

Just today I just need to get the logo enlarged and centered, make all font “arial”, update the navbar (and remove sticky navbar) and remove some of the footer border lines…but that should be a breeze now that the other stuff has been modified. I cant thank you enough :). I want this site (rxfitnessonline.com) to look exactly like https://www.rxfitness.net and then basically merge em..lol. I am now 200 steps closer thanks to you ??

@cmurway No problem. If you need help on those other items, feel free to create another topic and use the tag @thepixelme to notify me about it. I’d be glad to help.

As for this topic though, if the issues in the original post have been resolved, could you please mark this topic as resolved? Thank you very much!

Will do and thanks again ??