FredP

It works like this! thanks a lot! @tuanphan I had to make a little twist. @media screen and (max-width:767px) { [data-section-id="63987d07c71b4732240d4058"] .section-background * { visibility: hidden !important; } } @media only screen and (max-width: 767px){ [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; } }

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 😅

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

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