How to make an image transparent in the background?

[Havana2024]

HELLO,

How to make an image transparent in the background?

I want to set a background image only on the Contact page.

I want to set it to full size height and add a watermark so I can put text on top.

ASAP
please help me

FULL HIGHT

[rajweb]

Hey @Havana2024 ,

Follow these steps:

1. Online Store 

2. Themes

3. Edit Code

4. Find and open your theme.css or stle.css file (located in the Assets  folder).

5. Add the following code at the bottom:

.contact-page-background {
  position: relative;
  background: url('YOUR_IMAGE_URL') no-repeat center center;
  background-size: cover;
  height: 100vh;
  opacity: 0.7; /* Adjust transparency */
}

.contact-page-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2); /* Watermark effect */
  z-index: 1;
}

.contact-page-content {
  position: relative;
  z-index: 2;
  text-align: center; /* Adjust text alignment as needed */
  color: #000; /* Text color */
  padding: 50px; /* Adjust padding */
}

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[Havana2024]

Thank you for your support!

I have configured the information you provided correctly. However, it did not reflect well.

Also, for some reason the text has moved to the left.

Could you please confirm?

My site has not yet been published, but if you would like to do so, please log in below and check the site behavior.

19964f-7b.myshopify.com

password: aolyia

CONTACT PAGE : https://havanagroup-official.com/pages/contact

Thank you for your support!

[Havana2024]

[Dan-From-Ryviu]

Hi @Havana2024 

Can you share your contact page link?

[Havana2024]

Thank you for your comment!

Please check the following before it is published.

19964f-7b.myshopify.com

password: aolyia

CONTACT PAGE : https://havanagroup-official.com/pages/contact

Thank you for your support!