Different image background on mobile for a hidden page (home)

Hello,

I am struggling to change the background image of my home page on mobile. 
Here is the URL of my website:
https://www.fredetcam.com

Here is the code I injected in the custom CSS section:
 

 @media only screen and (max-width: 640px){
[data-section-id="63987d07c71b4732240d4058"].section-background img { opacity:0!important }}


 @media only screen and (max-width: 640px){
[data-section-id="63987d07c71b4732240d4058"] .section-background {
background-image: url(https://static1.squarespace.com/static/63987c03bf68e244c3d2b2ce/t/63bc4a45670e3049b76acef1/1673284168258/Invitation-Vertical.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Here is the image I would like to use on mobile:

 

I saw different posts about this topic but didn't find a solution...
If someone could help me.

Thanks in advance,
Fred

Hi,

You want to use a new image, or resize current image on mobile?

Hey @tuanphan,

I would like to use a different image, and only for the main page. (the other pages don't matter).

I added the code and imported the image in design > custom CSS > manage custom file. The link works well, but the code doesn't! 😉

Thanks in advance,
Fred

On 1/17/2023 at 3:40 AM, FredP said:

Hey @tuanphan,

I would like to use a different image, and only for the main page. (the other pages don't matter).

I added the code and imported the image in design > custom CSS > manage custom file. The link works well, but the code doesn't! 😉

Thanks in advance,
Fred

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="63987d07c71b4732240d4058"] {
    background-image: url(https://static1.squarespace.com/static/63987c03bf68e244c3d2b2ce/t/63bc4a45670e3049b76acef1/1673284168258/Invitation-Vertical.jpg) !important;
}
[data-section-id="63987d07c71b4732240d4058"] .section-background * {
    visibility: hidden !important;
}
}

Hey @tuanphan

The first part of the code works: The laptop (horizontal) image is properly hidden but the vertical image for mobile doesn't show itself! We are halfway 😅