I’m building a WordPress site for a golf course and I’m having trouble with opacity settings. On my main page, I have a background image of a golf hole and I set the text content opacity to 70% so you can still see the background image clearly. The problem is this opacity setting applies to all pages on my site.
I want to either remove the golf hole background completely from other pages, or set the text opacity back to 100% on every page except the homepage. I’ve been searching online for hours but can’t find a working solution.
Has anyone dealt with this before? What’s the best approach to handle different opacity levels for content on different WordPress pages?
I faced a similar challenge when customizing my WordPress site. The solution lies in leveraging the body classes that WordPress assigns to each page. For the homepage, you can target it using either .home or .page-id-[number], depending on your setup. To revert the opacity on all other pages, apply styles with .page:not(.home), which will ensure the text is fully opaque while removing the golf hole background from non-homepages. By inspecting the page source, you can easily discover the available body classes and tailor your CSS accordingly. This approach is efficient and avoids the need for additional plugins.
u can easily fix this by using the body classes that wordpress adds for each page. just apply your opacity css inside a .home class for the homepage. for others, target .page-id-[whatever], check the page source to find out the right classes.
WordPress automatically creates body classes for different page types, so this is pretty easy to fix. Since you want to remove that golf hole background from other pages, I’d create two separate CSS rules. First, wrap your current homepage styles (the background image and text opacity stuff) in a .front-page selector - this only targets your static homepage. Then add a general rule for all other pages that sets full opacity and removes the background image. This approach is much cleaner than trying to override existing styles and won’t cause conflicts. You can add this CSS in your theme’s style.css file or through the WordPress Customizer under Additional CSS. Just be specific with your selectors so the styles only apply where you want them.