Adding a custom design below a header

Site URL: http://www.scienceseeds.com

We are migrating our existing website (www.scienceseeds.com) from Wordpress to Squarespace and would like to include the seed trail in the attached below the header on Squarespace. I have added the green border on the bottom of the header but not sure how to add the seed trail.

The seed trail is in a file seedpattern.png (not included).  

You can do this with CSS

Can you share link to your Squarespace site?

If your site is trial, you can setup password & share url.

The website link:https://lynx-guppy-pnfz.squarespace.com

Password: tester123

Thanks!

15 hours ago, MM1 said:

The website link:https://lynx-guppy-pnfz.squarespace.com

Password: tester123

Thanks!

Add to Home > Design > Custom CSS. Replace below image url with your image url

header.Header.Header--top:after {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 50px;
    display: block;
}

Thank you! I got it to work - is it possible to add some padding above the image to make more space between the image and the logo's tagline?

3 minutes ago, MM1 said:

Thank you! I got it to work - is it possible to add some padding above the image to make more space between the image and the logo's tagline?

use margin-top: 50px;

or

margin-bottom: 50px;

thank you so much..

If I add padding to the bottom or to the top then the the product list filter for the store either disappears or is too close to the image - does that mean then that we need to add padding to every element them down? 

Add to Home > Design > Custom CSS to increase spacing between filter - image

main.Main.Main--products-list {
    margin-top: 50px;
}