Is it possible to add an image to a header that isn't site wide (i.e. using the CSS option in the design menu)?

Site URL: http://maryoak.com

I'm trying to add an image to my header that works site wide, except on the homepage where I want the entire image to appear. I have tried adding the code using the code injection in the Design menu, but on the homepage, this overrides my whole image banner.

(trying to reproduce the effect on http://maryoak.com)

Add to Page Header

<style>
.header-announcement-bar-wrapper {
   background-image: url("https://static1.squarespace.com/static/5e8f40af1b4e4b61d7da3560/t/5e98a44ff7394c3f871aec65/1587061839876/sunman_tiny.gif") !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>