Making a transparent box around the text in the banner image

Hey guys,

as you can see in the screenshot, it is very hard to read the white text because of the colorful picture behind it.

I like the picture and dont want to change it. Is it possible to make some kind of transparent box behind the text, so that you can still see the image but at the same time read the text better?

Appreciate any help!

Hello @Schnevski

It’s GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share the shop link?

yes sure,

duftzauber.shop

@Schnevski - will this entire overlay work for you? or you want for text only?

Hello @Schnevski

Please use below code on assets → base.css at the bottom to add some opacity

@media screen and (min-width: 750px){

.banner–desktop-transparent .banner__box{
background:#000 !important;
opacity: 0.4 !important;
}
}

Hello @Schnevski

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you:

  1. Go to Online Store → Theme → Edit code:

  1. Open your theme.liquid theme file

  2. Paste the below code before :


Result:

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

Hello @GemPages
this code will not work if we move section on page.

@niraj_patel

This code is only used with a single element, we put the code to minimize the impact on other elements

It worked, thank you very much!

There is still one thing: Can you help me to change the color of the subtitle from this greyish white to real white?

Appreciate the help very much!

@Schnevski

Please update the following code:


Hello it didnt work for me could you help?