How can I add a photo above my site header in 7.1?

Site URL: https://www.migrationandmobility.ca/

Hi!

I am trying to add a photo like a banner above my site header in 7.1 but can't figure out how to do it in CSS. I'd like it to be consistent across my site like the site header.

password to see the site: mobility

Add to Home > Design > Custom CSS

header#header:before {
    background-image: url(https://cdn.pixabay.com/photo/2020/12/03/16/58/sunset-5801050__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    content: "";
    width: 100%;
    height: 300px;
}

Exactly what my client wants. I added this code and the image seems to appear above as the page is loading, and then is moved behind the header. Any insight? Here is a screen grab.

Never mind. I didn't go into incognito and log in that way.. It worked. Thanks! I share that in case someone has the same issue.

This code works. (NOTE: only on homepage!). 

/* Add a banner */

body.homepage div#siteWrapper:before {

    content: "";

    background-image: url(Place here);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center; 

    display: block;

    width: 100%;

    height: 900px;

}

/* Add sticky header */

header#header {

    position: sticky !important;

    top: 0px;

}