How to make an Full-hight image 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

image↓

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!

[Dan-From-Ryviu]

Hi @Havana2024 

You can add this code to Custsom CSS in Online Store > Themes > Customize > Theme settings 

#contact {
background-image: url('add your image link here');
background-size: cover;
background-position: center center;
}

[websensepro]

Hi @Havana2024 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

#contact{
    height: 100%;
    width: 100%;
    background-image: url('your-image-url.jpg');  
    background-size: cover;  
    background-position: center;
    opacity: 0.7;  
    z-index: -1;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[Havana2024]

thank you!

It came true.

Also, when the characters in the rich text section are in the PC version, the left margin is missing.
Could you please tell me how to fix it?

[Havana2024]

I was able to implement it, but when I view it on mobile, the background image is not displayed.
Can you solve it?

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

PASSWORD: aolyia

[Havana2024]

I was able to implement it, but when I view it on mobile, the background image is not displayed.
Can you solve it?

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

PASSWORD: aolyia

[laddisahsi]

Hi @Havana2024 

You can follow the following steps:

1. Please go to the Online Store.
2. Then Edit Code.
3. Please find the theme.liquid file.
4. Please add code before closing the tag </head> tag.

<style>
form#contact-us-page {
    background-color: transparent;
}
section#ContactForm--template--23331947807011__contact {
    background-color: transparent !important;
}
#contact main#MainContent {
    background-image: url("https://images.pexels.com/photos/920382/pexels-photo-920382.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: auto !important;
}
</style>

If this solution is worked, then please Like this and Mark this as accepted solution!

Shuvam

[Havana2024]

thank you!

It came true.

Also, when the characters in the rich text section are in the PC version, the left margin is missing.
Could you please tell me how to fix it?

[Havana2024]

sorry. Couldn't solve it.
I tried it, but for some reason the image was only displayed at the back of the contact form.

I'm currently trying to use someone else's CSS.

Could you please confirm?