Support Center Visit Demo License manager Buy @ envato

How to Make All Header Images Darker

brothersdesigncombrothersdesigncom
in Other
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

  • PabloPablo
    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
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • brothersdesigncombrothersdesigncom
    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
  • brothersdesigncombrothersdesigncom
    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?
  • brothersdesigncombrothersdesigncom
    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/).
  • BryanBryan
    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
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • brothersdesigncombrothersdesigncom
    OK, thanks for letting me know.
  • brothersdesigncombrothersdesigncom
    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.

  • PabloPablo
    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
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • brothersdesigncombrothersdesigncom
    Ahhh OK! Thanks for the assistance. :)
Sign In or Register to comment.