How to Make All Header Images Darker

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.

Comments

  • 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.

    But, we strongly suggest to download the image and make it darker through the graphic software (GIMP or Photoshop)
    Thanks
  • 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
  • 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?
  • 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/).
  • 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
  • OK, thanks for letting me know.
  • edited 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.

  • 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
  • Ahhh OK! Thanks for the assistance. :)
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.