Jumbotron Transparency Issue

Bootstrap Studio Help
1

Hi fellow BootStrappers!,

i’m not sure if this is a bug or just me…

Ive just downloaded the BSstudio 5 Jumbotron as i need a semi-transparent background image with some hero text over the top of the image (2 columns).

initially, even having loaded by J-tron background image i can alter the opacity of both the heading and paragraph samples -and the background image stays bright.
but when i alter the opacity of the background image, it alters the opacity of everything and i cant find how to stop it -as it need the heading and para text as normal (no opacity).
any suggestions please?
Cheers,
Tiger

2

I’ve just added another component that may help, if you search for BS5 Jumbotron with background Image, you may need to tweek it a bit

3

WOW!! Thanks very much Richard.
You are without doubt both genius and legend…
Its perfect! I really appreciate your help.
thanks again
Craig

1 Like
4

You’re probably changing the opacity of the parent container, which will change the opacity of everything inside the Jumbotron. You can get around this by placing your background image inside its own div inside the Jumbotron, and then use CSS on just that div.