adding ‘full-width’ image to header

my blog: https://testdesign.miller-david.com/

hello,

i’m trying to transform my header into a full-width image (so it works like the background image here: (https://www.august.com.au/) with the title / tag overlaid as they are presently. in other words, i just want this image as the background.

i’ve uploaded the image (confluence.jpg) and am having it show up in the header, however it won’t resize or adjust when i zoom out. how can i get it to look the same regardless of zoom?

my current style.css looks like this (am using a child theme):

@import url(“../titan/style.css”);

/*Header
———————————————————— */
#header {
width: 100%;
height: 100%;
border-bottom: 1px solid #ede7e0;
background: #443B31 url(https://testdesign.miller-david.com/wp-content/themes/titan/images/confluence.jpg) no-repeat;
}

h1#title, div#title {
float: left;
padding: 30px 0;
font-size: 5em;
font-weight: bold;
line-height: 404px;
letter-spacing:-6px;
}

#description {
margin: 200px 0 0 40px;
float: left;
color: #796957;
font-size: 1.4em;
font-weight: bold;
line-height: 50px;
}

#nav {
width: 100%;
font-size: 1.3em;
font-weight: bold;
background: #443B31 url(https://testdesign.miller-david.com/wp-content/themes/titan/images/nav-background.gif) repeat-x bottom
}

div.notice {
display: block;
padding: 60px 0;
font-size: 1.6em;
}
div.notice strong { color: #2f2922; }
div.notice div {
margin: 10px 0;
padding: 20px;
background: #f0ebe6 url(../images/notice-background.gif) repeat-x top left;
}
div.notice div h2 {
font-size: 1.3em;
margin-bottom: 10px;
}

apologies for the big chunks of code.

can anyone help with this?

thanks so much.