Branding background as header : keep resizing

Yo,

I m using this :

#branding {
  background-image: url("https://www.matrasreinigingvlaanderen.be/wp-content/uploads/2013/04/headertest.jpg");
}

as custom CSS.

When title and description are on, there is no problem but this text is displayed over my background (logic)

when I delete the div site-details ( is the div with the title echo an description echo), also my branding is miimalised and so the complete background of this is not visible….

<div id="site-details">
					<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
					<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
                </div>

any solutions… site is https://www.matrasreinigingvlaanderen.be/

stupid thing is, I had this before on a site but cant remember how I fixed it (tried to find it but not succefull) https://www.benelux-iwa.com