Adjust Mobile Header Image Size

Hello,

I am currently using my custom CSS, for my website https://www.runningtigerrecords.com

#page {
display: none !important;
}

#search-top {
display: none !important;
}

#scroll-arrow {
display: none !important;
}

nav#site-navigation {
display: none;
}

body:not(.blog) #social-icons {
width: 100%;
position: absolute;
top: 0;
font-size: 50px !important;
}

#social-icons:not(.home) span{
font-size: 20px !important;
}

div.header-image {
background-size: 100% 100%;
}

Everything is how I like it but the size of the background header is not responsive to change size for a mobile version of the site. If someone can help me with either making the page responsive to to all media sizes or to just change the size of the header image for a when someone opens on a mobile/tablet.

Thanks!