I have a golf website I am working on where I am using a golf hole background. To have this so you can see the image on the home page I changed opacity levels down to 70% in CSS on the inner text content. I don't want it to look like that on other pages so trying to figure out how to do this one of two ways: 1. Only have the golf hole background image on the home page or 2. Have the Opacity level on all other pages besides the homepage at 100%. I have done a pile of searches and can't find a solution. location of site
it's actually pretty easy. You're looking at dynamic content display.
They're is multiple ways you can achieve this, let's take a look at one of them:
Taking a look at your website i can see that you added a opacity:.7; style to the .site-inner class. As the same style.css file is loaded on ALL pages, you can't achieve this from here, let's REMOVE the opacity:.7; from the style.css.
Conditional display is achieved using PHP. Sadly we can't use PHP into CSS file... but we can use CSS in a PHP file!
As you want the style of your .site-inner class to be different on the index/home page, we're going to open the header.php file.
Inside the header.php file, in-between the head tag you can add the following:
<?php if ( is_home() || is_front_page() ): ?>
<style media="screen">
.site-inner{opacity:.7!important;}
</style>
<?php else: ?>
<style media="screen">
.site-inner{opacity:1!important;}
</style>
<?php endif; ?>
That's it!
We're pretty saying: "IF the page template is home or front page, then set the opacity for the .site-inner class to .7, ELSE set the opacity for the .site-inner class to 1."
One more thing: The opacity style affect the parent container and all children form the affected parent. In your case, the content (text and images) are also affected by the opacity.
I would suggest you to use rgba color code. The rgba color code enable you, by using it with background-color, to control only the background color opacity of the container instead of the whole content (childs and parents). For example by using (background-color:rgba(255,255,255,.5)), you will get a white background with 50% opacity without affecting the content.
With rgba color code:
<?php if ( is_home() || is_front_page() ): ?>
<style media="screen">
.site-inner{background-color:rgba(255,255,255,.7)!important;}
</style>
<?php else: ?>
<style media="screen">
.site-inner{background-color:rgba(255,255,255,1)!important;}
</style>
<?php endif; ?>
EDIT: In response to @ArnaudV, I don't recommend targeting specific pages with css rules, if you add or remove pages that are affected by a specific targeted css rule, the new page wont be affected by it.
Do not hesitate to tell me if this help you, regards.