Hi, I am trying to achieve a hero message in a container on top of a background image container that has the brightness reduced by the effects panel. However, everything in those containers have the brightness reduced. How do I reduce the brightness of the background image container whilst still maintaining brightness of the hero message of the container on top?
I have attached an image to help.
Kind regards,
Phil

Hi Phil,

I would tackle this differently. I would open my background image in a photo editor and add a black layer and turn down its opacity to get the look you have above. Then just use that as the background image in the container. Do not change the brightness at all.

Cheers Steve, I have done this before but I think changing the brightness within SD3 would give me more flexibility instead of settling on doing it beforehand.

Phil, give Steve's suggestion a try, you may find that he is correct, and afterall you did ask.

When you try to change the brightness of a background image in a container SD is doing exactly what your telling it to do. I think what your asking SD to be is a photo editor. Currently there is no way to change the brightness of a background image without changing the brightness of the container and of course when you do that it will dim everything in that container.

You could always not use a container with a background image and use the Picture element instead and dim it down. Then create another container with your titles and give it a negative margin.

That being said my first suggestion is far faster to do.

Phil, If you use 'opacity' for the background, it will affect everything on top of that background too.
Instead, use RGBA values. I haven't done this for a long time, not since we got the 'R' apps, but I'll try to make a building block...

This is actually easier in traditional coding, since the images in SD3 cannot be made translucent with RGBA.

But I made a test file that contains two containers, the 2nd one being positioned absolute and covering the 1st container, and given some z index. The image is in the 1st container, made see-through, and the 2nd container has a transparent background and the text. I gave the 2nd container a background colour first, just to see what I was doing, then removed that colour when done.

Nice work Inger, still easier to do what I suggested.

Well, maybe. But it was my first attempt with this since the responsive apps were born, so I did it as close as possible to what I used to do in the HTML Editor.

Since the Hero Unit (or any other) container can have both a background picture and a background colour, I set the backgound colour to black amd the background image's blend mode to Darken. One can then adjust the background colour's Alpha slider to achieve whatever darkness one wants without affecting the brightness of the Heading etc.

Frank