Background container – z-index query

HI I’m using gantry5 helium template and need to use x2 background images: on the custom background layer is there any way with css to z-index the layer on top of the H1 text (Next up)?

#g-page-surround {
background-image: url(‘https://sevenstones.co.uk/victorperez/wp-content/uploads/2023/02/Calendar-background.jpg’);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;

Image 2 is the golfer PNG with no background using your custom page background plugin

body.custom-background {
background-image: url(“https://mlliiezx6vyb.i.optimole.com/w:auto/h:auto/q:mauto/f:avif/https://sevenstones.co.uk/victorperez/wp-content/uploads/2023/02/Calendar-background-golfer.png”);
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

The page I need help with: [log in to see the link]