How to have one image as background without stretching?

Hello

I'm hoping somebody might be able to advise how I get the first background image (not the video, the image below the video) to display as one background image, so as you scroll down after the video disappears, that one image just stays there. I've had to add the same image on each section, but would love it to be just one continuous image?

Any help on this would be massively appreciated.

The link is https://www.adventureswithloandco.co.uk/

Thank you!

Paris

You can add this to Website Tools (under Not Linked) > Custom CSS, but the image won't look nice

body.homepage {
.section-background, .page-section, .section-border, .section-background-content {
    background: transparent !important;
}
.section-background-content {
    opacity: 0 !important;
}
& {
   background-image: url(https://images.squarespace-cdn.com/content/v1/6389eeb77475690c29873b8b/e8e4e65b-acbc-4163-bcfb-91ef036720c8/Dog-015.jpg?format=2500w);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}