Agency Pro darken backstretch image

[Tim Squires]

Hi, is there a way to darken the backstretch image in Agency Pro? The image that I am currently using is too bright, and I would like to darken it to make the text more readable. I know that I could do that in Photoshop, but is there a CSS transparency filter or overlay technique that I could use?
Site is here:
http://mountains.timsquires.com.au/

---

timsquires.com.au

http://mountains.timsquires.com.au/

[Tim Squires]

Just looking at the demo - it already has the image darkened, somehow I have turned this feature off and can't work out how to get it back to the original state. Combing my style sheet at present for a solution . . .

---

timsquires.com.au

[Tim Squires]

Having a lot of trouble - can't find a solution, although I'm sure it must be a simple one. I have somehow switched off the dark screen over the Agency Pro backstretch image and need to restore it. Would be grateful for any advice, thanks 🙂

---

timsquires.com.au

[carasmo]

The theme doesn't apply any darkening via css or jquery. The Backstretch image is dark to start with:

http://demo.studiopress.com/agency/wp-content/themes/agency-pro/images/bg.jpg

and you could use jQuery or CSS.

This works:

body {
    position: relative
}

body:before {
    z-index: -1;
    content: ' ';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0, .2);
}

---

Genesis Theme Customization and Help

[carasmo]

.2 in the background style is 20% of black. .5 would be 50% .8 80% and so forth

---

Genesis Theme Customization and Help

[Tim Squires]

Thanks for your code. Sadly I can't get it to work 🙁 will keep trying.

Thanks again.

---

timsquires.com.au

[carasmo]

you put it in your style.css for your child theme Admin/Appearance/Editor then select the file style.css from the right side and scroll all the way down and paste in the code -- making sure you are outside all other styles and media queries. I just did it to my install of the theme, works fine.

---

Genesis Theme Customization and Help

[Tim Squires]

Hi Carasmo, thanks so much. I followed those steps and still no luck. Nothing changes on my setup 🙁

---

timsquires.com.au

[carasmo]

Yes, because the CSS that you added is not closed. Run your CSS through lint.

This

@media only screen and (max-width: 280px) {

    .feature-heading h1{ 
         top: 142px;  
    }
    

/*For feather logo over feature image on country pages

Should be:

@media only screen and (max-width: 280px) {

    .feature-heading h1{ 
         top: 142px;  
    }
    
} /* <----- this was missing */

/*
For feather logo over feature image on country pages

---

Genesis Theme Customization and Help

[Tim Squires]

Hi Carasmo, thanks so much for your code and for picking up that error in my CSS - very much appreciated. It works perfectly now. Best wishes, and thanks again 🙂

---

timsquires.com.au

[carasmo]

You're welcome. Please mark topic resolved.

Thanks!

---

Genesis Theme Customization and Help

[Author]

Posts