Code injection header laying on page content instead of above

Site URL: https://abigailbrockamp1.squarespace.com/

Hello! I am pretty much spanking brand new at coding so sometimes I don't even know how to properly search something. Hence my question here! I'm in a class right now and one of the assignments is to recreate an existing non-Squarespace site as a Squarespace. 

I went in and created an html table through the header code injection. However, I'm looking to make the header lay on top of pages (just like putting the header elements in the "bottom" sections of the site-styles) instead of above each page like a banner. 

I've uploaded a screenshot of my site header, and the original sites. Thanks so much!

Website: https://abigailbrockamp1.squarespace.com/

pw: brineintopedro

^^(possible B instead of b)

Add to Home > Design > Custom CSS

.headertable table {
    background: #f5f6f0 !important;
}

That helps on this particular page, but there are other pages where an image is the background. I need this header to overlay the top of those pages/index sections as well.... So, over banner images too. I haven't been able to find the right information about this, so maybe it's not possible? 

Would it be better to make it a code block on every page that acts as a header?  Like I said, I'm super new at this so any advice is welcome! 

Here's another image for reference the header over a background (a frequent style throughout the website). Thanks for your help! 

https://share.getcloudapp.com/L1upLg5Z