How to make an Full-hight image in the background?

Store Design
, , ,

Topic summary

A user seeks help adding a full-height, transparent background image to their Shopify store’s Contact page, with the ability to overlay text on top.

Solutions Provided:

Three community members offered CSS-based approaches:

  • Custom CSS method: Add code targeting #contact with background-image, background-size: cover, and background-position: center properties through Theme Customizer
  • Theme file editing: Insert similar CSS into theme.css or base.css files
  • theme.liquid modification: Add inline styles directly before the closing </head> tag

All solutions include opacity adjustments for the watermark effect.

Current Status:

The original poster successfully implemented a solution on desktop but encountered two ongoing issues:

  1. Mobile display problem: Background image fails to appear on mobile devices
  2. Text alignment issue: Rich text section content is missing left margin on PC version

The discussion remains open with the user requesting additional help to resolve the mobile responsiveness problem. Site credentials provided for troubleshooting: havanagroup-official.com/pages/contact (password: aolyia).

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

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↓

S__38961159.jpg
S__38961159.jpg960×1706 143 KB

Havana2024_1-1734451793995.png
Havana2024_1-1734451793995.png175×400 33.6 KB

Please check the following before it is published.

password: aolyia

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

Thank you for your support!

2

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;
}
3

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!

4

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 tag.

laddisahsi_0-1735120171118.png
laddisahsi_0-1735120171118.png418×690 327 KB

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

Shuvam

5

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?

スクリーンショット 2024-12-27 151323.png
スクリーンショット 2024-12-27 151323.png903×766 384 KB

6

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?

スクリーンショット 2024-12-27 151323.png
スクリーンショット 2024-12-27 151323.png903×766 384 KB

7

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

8

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?

9

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