Color Overlay

  • Resolved CYBERsprout

    (@cybersprout)


    8 years, 1 month ago

    First of all, I really like this plugin! It is super handy.

    Is it possible to do a color overlay (e.g. rgba(0,0,0,0.5)) over the top of the header image? The post title text is very difficult to see without a color overlay. I added a background color to “.big-leader .wrap” with a 50% opacity but I can’t get it to the edge because of the .site-inner width of 960px. https://cl.ly/1I0k0p3e1v1E

    Is there a better way to accomplish n color overlay? Thanks!

    • This topic was modified 8 years, 1 month ago by CYBERsprout.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    Yes, you’re on the right track, although you may need to adjust some of your theme styling. I’ve done this effect on this site, with a 10% opacity. I did have to make sure that the .big-leader .wrap had a max-width of 100% instead of the site’s default 1140px. If you’ve moved the backstretch image inside of the.site-inner element, you’ll have to adjust the max-width on the .site-inner .wrap as well. Hope that helps you get started.

    Thread Starter CYBERsprout

    (@cybersprout)

    Adding max-width:100% did the trick! Here’s my CSS in its entirety if anybody else wants to adapt it to their site:

    .big-leader .wrap {
	background: rgba(0, 0, 0, 0.35);
	padding-top: 100%;
	padding-bottom: 20px;
	max-width:100%;
	}

    Thanks for the help!

    Plugin Author Robin Cornett

    (@littlerchicken)

    Awesome, glad that helped! Thank you for sharing your final CSS as well.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Color Overlay’ is closed to new replies.