ASAP help me! < How to make an Full-hight image in the mobile background? >

[Havana2024]

HELLO,

I applied the code below that you provided, but the background image is not displayed on mobile.

Can you solve it?

↓

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

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.

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!

[rajweb]

Hey @Havana2024 

Thank you for reaching out! I've reviewed the issue, and here’s a solution to ensure your background image displays properly on mobile devices, fully covering the screen with text overlay capabilities:

CSS Code to Fix the Background Image Issue:

/* Apply the background image to the contact page */
#contact {
    height: 100vh; /* Full viewport height */
    width: 100%;
    background-image: url('your-image-url.jpg'); /* Replace with your image URL */
    background-size: cover; /* Ensures the image covers the screen */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat;
    opacity: 0.7; /* Watermark effect */
    position: relative; /* To layer text on top */
}

/* Ensure text or form appears on top of the background */
#contact .contact-form {
    position: relative;
    z-index: 1;
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
    #contact {
        height: 100vh; /* Ensure full-screen height on mobile */
        background-attachment: fixed; /* Optional: Adds a scroll effect */
    }
}

Key Notes:

1. Replace 'your-image-url.jpg' with the correct image link from your Shopify files.

2. This code will make the background image responsive and visible on both desktop and mobile devices.

3. The opacity setting creates a watermark effect for better text visibility.

Additionally, I’ve reviewed your theme, and with over 6-7 years of experience working on Shopify, I can confirm that small theme adjustments can sometimes cause layout issues like this. I’d be happy to assist with any other tweaks or improvements you’re working on to enhance your site’s functionality and design.

Feel free to reach out to me at [ rajat.shopify@gmail.com ] for any further assistance or inquiries. I’m here to help make your Shopify store as seamless and visually appealing as possible.

Looking forward to your response!

Best regards,

Rajat

Shopify Expert