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
Topic summary
Goal: Apply a full-height background image with transparency (watermark effect) only on the Contact page, with text overlaid.
Proposed approach: Add CSS in theme.css to:
- Set a background image with cover, centered, height: 100vh, and opacity for transparency.
- Use a ::after overlay with rgba() to create a watermark layer.
- Layer page content above the background via z-index and style text (alignment, color, padding).
Follow-up: A request was made to review the live page. The store preview URL and password were shared for access, including the direct Contact page link.
Current issue: After implementing the CSS, the effect did not appear as expected and the text shifted to the left. A screenshot was provided to illustrate the problem.
Status: Unresolved. Verification and debugging on the provided preview site are needed to confirm why the background transparency and layout are not reflecting as intended. Images/attachments and access credentials are central to diagnosing the issue.
Hey @Havana2024 ,
Follow these steps:
-
Online Store
-
Themes
-
Edit Code
-
Find and open your theme.css or stle.css file (located in the Assets folder).
-
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
Hi @Havana2024
Can you share your contact page link?
Thank you for your comment!
Please check the following before it is published.
password: aolyia
CONTACT PAGE : https://havanagroup-official.com/pages/contact
Thank you for your support!
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.
password: aolyia
CONTACT PAGE : https://havanagroup-official.com/pages/contact
Thank you for your support!
