I've done quite a bit of browsing across the web trying to follow different tutorials to get a custom background to work in squarespace. Does 7.1 even allow custom backgrounds?
I've tried using some different backgrounds from heropatterns.com but haven't been able to get any to work.
I'd ideally like to use the background for the whole page minus the header and the footer, but I can't even get my code to work for a section.
For a whole page effect we need something different.
Remove the previous CSS, make a copy somewhere and add the following to Design > Custom CSS.
#collection-5f6133c1b027eb36546c97a1 {
Question
IMPACT 1
Site URL: https://www.impactpa.church/kids
I've done quite a bit of browsing across the web trying to follow different tutorials to get a custom background to work in squarespace. Does 7.1 even allow custom backgrounds?
I've tried using some different backgrounds from heropatterns.com but haven't been able to get any to work.
I'd ideally like to use the background for the whole page minus the header and the footer, but I can't even get my code to work for a section.
.page-section[data-section-id="5f6202a7242abe11d0086eec"] {background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }
Any help is appreciated!
Link to post
Top Posters For This Question
4
3
3
1
Popular Days
Mar 6
2
Feb 15
2
Mar 15
2
Feb 23
1
Top Posters For This Question
creedon 4 posts
IMPACT 3 posts
Vit 3 posts
AClark 1 post
Popular Days
Mar 6 2021
2 posts
Feb 15 2021
2 posts
Mar 15 2021
2 posts
Feb 23 2021
1 post
Popular Posts
Vit
@creedon Thank you so much - it worked awesome!
creedon
Add the following to Design > Custom CSS. :not(.has-background) [data-section-id="5f6202a7242abe11d0086eec"] .section-background { background-color : #DFDBE5; background-image : url("data:
creedon
For a whole page effect we need something different. Remove the previous CSS, make a copy somewhere and add the following to Design > Custom CSS. #collection-5f6133c1b027eb36546c97a1 {
Posted Images
11 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment