• Hello,

    I was hoping to make the header image on the main page and in the blog posts be a little darker. Something like the post-navigation / next-post images on the bottom of the blog posts. Looks like it might be a background color value with a .4 opacity, but I’m not sure how to apply that to these headers. Any suggestions?

    Thanks!

    -Spencer

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter spencerpdx

    (@spencerpdx)

    Follow-up: The goal was to make white text stand out better against arbitrary images that might have white in them, and I ended up just making the background of the text blocks .4 opacity black. Still curious about how to do what I described in my original, but I’d happily take solutions to the other two questions I posted before this one. ??

    • This reply was modified 6 years, 2 months ago by spencerpdx.
    whatsaroundthebend

    (@whatsaroundthebend)

    “I ended up just making the background of the text blocks .4 opacity black.” Exactly how did you do this? I’d like to get the same effect.

    Theme Author Organic Themes

    (@organicthemes)

    Hello,

    For making the blog post images darker, you can add the following styles:

    .post-holder .featured-img::before {
      background-color: rgba(0, 0, 0, 0.4);
    }
    .post-holder .featured-img:hover::before {
      background-color: rgba(0, 0, 0, 0.7);
    }

    For making the header image darker, you could try the following style:

    #wp-custom-header::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 2;
    }

    I hope this helps. Thanks!

    whatsaroundthebend

    (@whatsaroundthebend)

    Thanks so much! Ok, one more question now that the blog post images are darker on hover – how can I get the text to be lighter? I’ve been googling and I can’t seem to figure it out.

    Thanks again for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Way to tint header images a little darker?’ is closed to new replies.