doctor_g Posted October 29, 2022 Share Posted October 29, 2022 Hi, how to add a fixed background image for a certain page only? I've came up with this code but it doesn't work for certain collection. When pasted without the "collection" line, it works, however for all pages equally. How to make it work for a certain page only? Thank you. #collection-COLLECTIONNUMBER { body::before { background-image: url('IMAGELINKHERE.JPG'); background-position: center; background-repeat: no-repeat; background-size: cover; content: ''; height: 100%; opacity: 1; position: fixed; left: 0; top: 0; width: 100%; z-index: -10; } .page-section, .page-section .section-background { background-color: transparent !important; } } Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 You can add this code to Page Header <style> body::before { background-image: url('IMAGELINKHERE.JPG'); background-position: center; background-repeat: no-repeat; background-size: cover; content: ''; height: 100%; opacity: 1; position: fixed; left: 0; top: 0; width: 100%; z-index: -10; } .page-section, .page-section .section-background { background-color: transparent !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
rasmusarentsen Posted March 4 Share Posted March 4 This doesn´t work for me???? wonder why Any ideas anyone? https://www.cava.dk/konfirmation password: 642Rasmus <style> body::before { background-image: url(https://static1.squarespace.com/static/6350e9718a76f94ed97ba1a0/t/640318bcb19d2c72651a46bf/1677924541482/UNA-OysterCava-05362.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; content: ''; height: 100%; opacity: 1; position: fixed; left: 0; top: 0; width: 100%; z-index: -10; } .page-section, .page-section .section-background { background-color: transparent !important; } Link to comment
tuanphan Posted March 6 Share Posted March 6 On 3/4/2023 at 9:30 PM, rasmusarentsen said: This doesn´t work for me???? wonder why Any ideas anyone? https://www.cava.dk/konfirmation password: 642Rasmus <style> body::before { background-image: url(https://static1.squarespace.com/static/6350e9718a76f94ed97ba1a0/t/640318bcb19d2c72651a46bf/1677924541482/UNA-OysterCava-05362.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; content: ''; height: 100%; opacity: 1; position: fixed; left: 0; top: 0; width: 100%; z-index: -10; } .page-section, .page-section .section-background { background-color: transparent !important; } Use new code <style> body::before { background-image: url('IMAGELINKHERE.JPG'); background-position: center; background-repeat: no-repeat; background-size: cover; content: ''; height: 100%; opacity: 1; position: fixed; left: 0; top: 0; width: 100%; z-index: -10; } .page-section, .page-section .section-background, .section-border { background-color: transparent !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
rasmusarentsen Posted March 6 Share Posted March 6 Thx Tuanpan. it works like a charm... What to do If I don´t want it to cover my footer? /Rasmus Link to comment
JFRedmondStudio Posted March 8 Share Posted March 8 (edited) Thanks for this, Tuanphan, I was trying to figure it out also. But what if I want a curved divider at the bottom still? See this page for example: https://tortoise-paddlefish-lj6z.squarespace.com/about-amy pw: feather Edited March 8 by JFRedmondStudio Link to comment
tuanphan Posted March 11 Share Posted March 11 On 3/7/2023 at 3:47 AM, rasmusarentsen said: Thx Tuanpan. it works like a charm... What to do If I don´t want it to cover my footer? /Rasmus Which page are you referring to? I can test new code easier On 3/9/2023 at 5:14 AM, JFRedmondStudio said: Thanks for this, Tuanphan, I was trying to figure it out also. But what if I want a curved divider at the bottom still? See this page for example: https://tortoise-paddlefish-lj6z.squarespace.com/about-amy pw: feather What should it look like? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
rasmusarentsen Posted March 15 Share Posted March 15 https://www.cava.dk/ Password: 642Rasmus Right now I just inserted a background on the section and that solves the problem. maybe that actually is the (simplest) solution /Rasmus 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