Elise__ Posted July 20, 2021 Share Posted July 20, 2021 Site URL: https://mandarin-violin-mjw7.squarespace.com/ Dear squarespace community, I would like a wrapper around my background image. I want it to depend on the background image, and not the content. Password: elise Many thanks! This is the code I use now: /**** HOMEPAGE ****/ /* Section 1 */ /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .content-wrapper {width:100%!important; background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)); z-index: 1;} /* Header gradient */ .header-announcement-bar-wrapper.black, header#header { background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)) !important; } @media @mobile { /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .content-wrapper {width:100%!important; background: linear-gradient(to right , rgb(216, 188, 171),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgb(216, 188, 171)); z-index: 1;} /* Header gradient */ .header-announcement-bar-wrapper.black, header#header { background: linear-gradient(to right , rgb(216, 188, 171),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgb(216, 188, 171))!important; } } Beyondspace 1 Link to comment
Beyondspace Posted July 21, 2021 Share Posted July 21, 2021 18 hours ago, Elise__ said: Site URL: https://mandarin-violin-mjw7.squarespace.com/ Dear squarespace community, I would like a wrapper around my background image. I want it to depend on the background image, and not the content. Password: elise Many thanks! This is the code I use now: /**** HOMEPAGE ****/ /* Section 1 */ /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .content-wrapper {width:100%!important; background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)); z-index: 1;} /* Header gradient */ .header-announcement-bar-wrapper.black, header#header { background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)) !important; } @media @mobile { /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .content-wrapper {width:100%!important; background: linear-gradient(to right , rgb(216, 188, 171),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgb(216, 188, 171)); z-index: 1;} /* Header gradient */ .header-announcement-bar-wrapper.black, header#header { background: linear-gradient(to right , rgb(216, 188, 171),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgb(216, 188, 171))!important; } } try /**** HOMEPAGE ****/ /* Section 1 */ /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .section-background .section-background-overlay {width:100%!important;opacity: 1; background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)); z-index: 1;} @media @mobile { /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .section-background .section-background-overlay {width:100%!important;opacity: 1; background: linear-gradient(to right , rgb(216, 188, 171),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgb(216, 188, 171)); z-index: 1;} } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Elise__ Posted July 21, 2021 Author Share Posted July 21, 2021 (edited) On 7/21/2021 at 6:27 AM, bangank36 said: try /**** HOMEPAGE ****/ /* Section 1 */ /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .section-background .section-background-overlay {width:100%!important;opacity: 1; background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)); z-index: 1;} @media @mobile { /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .section-background .section-background-overlay {width:100%!important;opacity: 1; background: linear-gradient(to right , rgb(216, 188, 171),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgb(216, 188, 171)); z-index: 1;} } Hi @bangank36, thank you for your reply. I implemented it, but I have a question How do I manage to have the background overlay behind the text? As you can see some of the text is disappearing behind the overlay. Thank you Edited July 29, 2021 by Elise__ Link to comment
Elise__ Posted July 29, 2021 Author Share Posted July 29, 2021 Hi @bangank36, Do you maybe have a clue on how I can bring the text in front of the overlay? Kind regards, Elise 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