KaijuCorgi Posted February 24, 2022 Share Posted February 24, 2022 Site URL: https://www.apertureconsultinggroup.com/home I'm working with a client-installed template using Brine, and I want to insert a background image on all the main pages. But the template uses Index pages and I can't find a way to set a background image for the entire Index page, as opposed to the banners for each "page"/section. Here's an example with the background set for the top section. You can see it's cut off - Instead I want the background to fade out gradually behind the first 2-3 sections. I know I can accomplish this by combining sections/pages so there's one banner for all the content, but that's not ideal at all. I've attached a Figma screenshot of what I want it to look like. Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 Add to Design > Custom CSS body#collection-60d204608d9a33537c7a759a { background-image: url(https://images.squarespace-cdn.com/content/v1/60d204568d9a33537c7a72da/1645755511799-RJT2VBVKBS2XSFEPTI4D/contour+background.png?format=1500w) !important; } body#collection-60d204608d9a33537c7a759a section { background-color: transparent !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KaijuCorgi Posted March 1, 2022 Author Share Posted March 1, 2022 (edited) Yes!! Thank you so much @tuanphan! So simple but now I know 😁 I added background-repeat: no-repeat and it's exactly what I needed. You're the best. Edited for anyone finding this later - I actually used the following, so the image would scale to the width of the window but not repeat either horizontally or vertically: background-size: 100%; background-repeat: no-repeat; Edited March 1, 2022 by KaijuCorgi additional info tuanphan 1 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