Skip to content

Instantly share code, notes, and snippets.

@marklchaves
Created November 26, 2019 10:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marklchaves/1d1c1919806488b5b8c3d2da03edb722 to your computer and use it in GitHub Desktop.
Save marklchaves/1d1c1919806488b5b8c3d2da03edb722 to your computer and use it in GitHub Desktop.
Darkening a Background Image CSS Only

Just in case you don't find a Fusion Builder setting (doubt there is one). And, without seeing your page, here's an example that will work for the hero image on this page.

https://marklchaves.com/responsive-banner-hero-image-demo/

.hero {
  background-image: linear-gradient(
  rgba(0, 0, 0, 0.3),
  rgba(0, 0, 0, 0.3)), 
  url('https://marklchaves.com/wp-content/uploads/2019/07/test2slider-lt-768.jpg');
}

Good luck!

P.s. And, there's always Photoshop ;-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment