Jump to content

Adding Markup as footer

Recommended Posts

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
  • Replies 6
  • Views 648
  • Created
  • Last Reply

@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.

 

Ekrānuzņēmums (271).png

Link to comment

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

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

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.