How to add an adaptive image along the length of my website including the header

Hello,

I'm working on a site for a client and have an idea of how I'd like the site to look but no idea how to execute. The idea is to use her logo and bars motif along the right side of the website. I've made a version of this by layering a transparent image in fluid engine, and would like some help with the following:

At minimum, is there a way to extend the image from the section up into the header so that the bars start at the top of the page rather than beneath the header?

• Current
  
• Goal (photoshopped)
  

At most (and this will likely take custom coding that I'd love to contract out if possible), is there a way to have the bar motif live separately from the sections in order to avoid:

• Bars getting crunched depending on the height of the section
  
• Manually disabling the image animation when the page loads so that it doesn't flow in like the other images
• Having a black PNG and a white PNG to use with respective sections

Thanks for any help and/or leads. Website: https://juliegraceburke.squarespace.com/ Password: JGB

Did you solve or still need help? I see both current - goal images look same

Thanks @tuanphan for checking in. I was able to achieve option 1 using the following, with multiple entries to accommodate for different screen sizes.

@media screen and (max-width:765px) and (min-width:300px) {#block-yui_3_17_2_1_1685395718986_2847 {
    margin-top: -100px;
    height: 120%;
  }
}

I only applied the code to the homepage image for now since It would end up being a lot of CSS to do every screen size for every page, so ideally still looking for an option 2.