g2creative2024 Posted September 8 Share Posted September 8 Site URL: https://www.conventuscap.com/ I thought this would be pretty simple, but I can't seem to have a different background image display on mobile vs. desktop. Here's the code I'm using; i've tried many iterations. I'm not very technical so have been relying on forums, videos and chat-gpt to generate the code. /* Desktop background image setup */ [data-section-id="66db7a976f5ccd2bf1766db6"] { background-image: url('https://images.squarespace-cdn.com/content/v1/66db7a6d7845a054f30f1833/e9642412-db53-4837-b450-ad850a2407ab/Conventus+Capital+Website+Cover.png?format=2500w') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background: unset !important; /* This can help reset any previously set inline background styles */ } /* Mobile background image setup */ @media screen and (max-width: 640px) { [data-section-id="66db7a976f5ccd2bf1766db6"] { background-image: url('https://images.squarespace-cdn.com/content/66db7a6d7845a054f30f1833/87c975f8-f478-475f-a551-6b5d3a4ce36e/Conventus+Capital+Mobile+Cover.png') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background: unset !important; /* This can help reset any previously set inline background styles */ } /* Remove any nested background image if applied */ [data-section-id="66db7a976f5ccd2bf1766db6"] > .content-wrapper { background-image: none !important; } } Link to comment
Lesum Posted September 9 Share Posted September 9 @g2creative2024 Hi! You can add this code under Websites > Pages > Website Tools > Custom CSS @media only screen and (max-width: 640px) { section[data-section-id="66db7a976f5ccd2bf1766db6"] .section-background img { opacity: 0 !important; } section[data-section-id="66db7a976f5ccd2bf1766db6"] .section-background { background-image: url('https://images.squarespace-cdn.com/content/66db7a6d7845a054f30f1833/87c975f8-f478-475f-a551-6b5d3a4ce36e/Conventus+Capital+Mobile+Cover.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } } tuanphan 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment