Background image opacity

How can I adjust the background image opacity ?

  • Tyler Postle
    • CGO

    Hey Ed,

    Hope you're doing well today!

    We can use CSS to do this :slight_smile: although I do think having a built in feature to do this easier is a good idea to I will flag that as a feature request.

    In the meantime, you can add this to the Upfront CSS editor for that region or you can use a plugin such as this one here:

    #upfront-region-container-homepage-background-image div.upfront-region-container-bg {
      opacity: 0.8;

    Adjust as needed :slight_smile:

    Let us know if you have any further questions.

    All the best,

  • Ed
    • Design Lord, Child of Thor

    Thanks! That worked. Unfortunately though the change applied to the whole region and therefore my logo file is now also affected - I wanted that to be normal opacity so it would jump off the image better. Is that an easy change ?

  • Jude
    • DEV MAN

    Hey Ed

    Sorry the response took a while longer than expected. Appreciate your patience.

    Here is some additional CSS that you can add that controls just the Logo bit

    .upfront-image-caption-container.upfront-image-caption-container {
      opacity: .3;

    Using this with Tyler's code will give you the desired results.


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.