Centering heading text in middle of image and make it transparent to see the image

Shopify Discussion
1

HEY

I want to move the heading text to the middle of the home page and make it transparent to see the image, can you help me, please?

Capture d'Ă©cran 2023-12-12 010738.png
Capture d'Ă©cran 2023-12-12 010738.png410Ă—817 86.9 KB

thank you

2

Hi Irfane,

Are you able to give a little more detail on your problem? Do you mean that you’re looking to make the text transparent or the image transparent? Is your site publicly available to view? Or do you have access to some of the code that you can provide so that I can provide a solution?

3

Hi @irfane ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

1 Like
4

yes for sure!

https://gearndwear.myshopify.com/ here it is

THANK YOU

5

hello

I want to move the text in the middle of the image an make the text background transparent to be able to see the image

the link is:https://gearndwear.myshopify.com/

thank you

6

Okay, I’ve had a quick look and this shouldn’t be a difficult fix.

You could try the below. However, this may affect other elements.

.banner__content.banner__content--bottom-center {
    align-items: center;
    justify-content: center;
    opacity: 0.4; // you can make this whatever you like.
  }
}

.slideshow__text.banner__box {
  background: transparent;
}

I would be inclined to search your editor code for the banner.css (not 100% sure what this would be called) and look for these classes (e.g., banner__content) and overwrite the particular property that disagrees with the above code. Make sure you don’t remove anything that is already there, and take a backup if you’re not feeling confident.

I hope that helps point you in the right direction.

7

hey, thank you for the answer but I am afraid to tell you that the solution you gave didn’t fix my problem and adjust the text position,but it made it transparent hope you understand, thank you again

8

I’m sorry to hear that Irfane. That seems to be the fix in my browser. Depending on where you placed the code it may be being overwritten.

Drop me a message if you’d like me to have a look at your code, for this I would need a collaborator code.

9

Insert this CSS snippet into your CSS file:

.slideshow__text-wrapper.banner__content.banner__content--bottom-center.page-width {
    align-items: center !important;
}
.slideshow__text.banner__box {
    background: transparent !important; 
}

Result:

![view - 2023-12-15T181125.746.png|1029x833](upload://RnHFw8XrrySt2p24q8F4oeqlSW.png)

**Hope it works @irfane **