How to make section background image fixed so that no part of it is being hidden by the edge of the screen nor the site header?

Site URL: https://www.therufflifedallas.com

In the first section of the homepage, I want the background image to do two things: 1 - the top of the image starts at the bottom of the site header and does NOT sit underneath it like it does now, and 2 - I want the width to be fixed to the screen size while maintaining aspect ratio. I have tried numerous codes to accomplish these things and can't seem to figure it out - help please!

Password: faf8wzh8ckx-cwg_UZR

Add to Design > Custom CSS

body.homepage article section:first-child {
    padding-top: 0px !important;
}
body.homepage header#header {
    background-color: transparent;
}