Guest Posted February 16, 2021 Share Posted February 16, 2021 Hello, I am looking forward to setting an svg to make waves for both the header and the footer, how can I add a custom class to my footer in order to pull it off? I think I know how to make the css, but I cannot find a way to add a new id/class to my footer and or header. Link to comment
ArminB Posted February 16, 2021 Share Posted February 16, 2021 Hi, you could add a CODE BLOCK to the footer and use the Browser Web Inspector to identify the ID of that block About Armin: Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084 Website: www.braunsberger-media.com Link to comment
Guest Posted February 16, 2021 Share Posted February 16, 2021 @ArminB I tried using footer-sections, but that didn't seem to add the waves I was trying to add(they did work on a different markdown I used for testing. Also if I try adding the background color, it doesn't change, do you know why that could be happening? Edit when hovering, this happens. It also does not appear, when I try going there in the released version. Link to comment
Guest Posted February 16, 2021 Share Posted February 16, 2021 Also do you happen to know how I can stretch the footer across my entire page? Link to comment
ArminB Posted February 16, 2021 Share Posted February 16, 2021 you could share the site link here so people can take a look About Armin: Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084 Website: www.braunsberger-media.com Link to comment
Guest Posted February 16, 2021 Share Posted February 16, 2021 https://www.altairdev.top/ @ArminB here is the link to the site, I managed to set it at the top, but sadly that doesn't work on the bottom. ``` #footer-sections { background: black; overflow: visible; background: hsl(204, 16%, 65%); background-size: 105% auto; background-image: url("https://auxetite-cdn.sirv.com/wavy-blurple-by-nouridio.svg") !important; background-color: black; content: ''; width: 100%; height: 25%; bottom: 0; left: 0; position: absolute; ``` I am not sure how to put my code in code-block here, but here is the code I am trying to use, when using this, my footer just disappears. Quote Link to comment
tuanphan Posted February 18, 2021 Share Posted February 18, 2021 Try this code footer.sections {position: relative;} footer.sections:before { content: ""; display: block; background: black; overflow: visible; background: hsl(204, 16%, 65%); background-size: 105% auto; background-image: url(https://cdn.pixabay.com/photo/2020/12/10/10/17/jasper-national-park-5819878__340.jpg); background-color: transparent; content: ''; width: 100%; height: 25px; top: 0; left: 0; position: absolute; z-index: 999; } 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.