How to Make All Header Images Darker

brothersdesigncom · March 2020

I have played around for over an hour to try and make just the header image a bit more opaque, so that the white title text shows up better against the background.

Trying to use filter: brightness(50%); but it makes both the background image AND the text darker -- I want only the header background image darker.

For example, the photo at the top of this page.

I can add the highlighted CSS to the 'background-image' area 'element.style' area in Chrome (see screenshot) to make JUST the background darker, as I want:

background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),url(https://bhutantrips.com/wp-content/uploads/2020/03/tigers-nest-bhutan.jpg)

...but I cannot find where to put this in the theme CSS to make it do this for every header image.

Pablo · March 2020

Hello,

The problem is, that your image on top is not a "header image" itself - it's just a background image for the first section of the Muffin Builder.

For now, I have to ask you, to provide some class on the sections settings, then I'll check if I can help you with further css code.

https://prnt.sc/rf6b5b

But, we strongly suggest to download the image and make it darker through the graphic software (GIMP or Photoshop)

Thanks

brothersdesigncom · March 2020

Hello,

I have added the code.

I am trying to use CSS so that I don't have to go through every image and play with the opacity to make it look right, saving and editing and uploading multiple times per image (as I have already been doing for some time).

Thanks,

Scott

brothersdesigncom · March 2020

Just to make sure, you add the 'darkFilter' code to the very first section of every page where the background image is that I want to be darker, correct?

brothersdesigncom · March 2020

For now I have added it to the first section (where the bg image is) of the link I shared earlier (https://bhutantrips.com/itineraries/intro-bhutan/).

Bryan · March 2020

Hey,

the only way to do this is to add to each section of the page (the top one) a custom class and write separate css code for each background image on each page. You cannot do this globally because the background css will be either a gradient or the image from the Muffin Builder.

thanks

brothersdesigncom · March 2020

OK, thanks for letting me know.

brothersdesigncom · March 2020

I tried doing this, by making a custom CSS class of:

.darkheader {background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)) !important}

in the BeTheme Custom CSS area. Then I added ''darkheader' to the Custom | Classes area of the first block of the page, where the header background is. Nothing changed.

See https://bhutantrips.com/itineraries/intro-bhutan/

Pablo · March 2020

You have to add !important tag after CSS rule, because right now some classes are more important than yours and it get overwrited.

I already edited your previous answer and modified the css code to be proper.

Thanks

brothersdesigncom · March 2020

Ahhh OK! Thanks for the assistance.

How to Make All Header Images Darker

Comments

This website uses cookies