resizing header image in custom css to comply with all viewers

I have been working on my new 2016 Hueman wordpress theme at: For1YearOfMyLife.com and when I insert the custom css – .site-title {height: 675px;width: 1400px;}#header {background-image: url(http://for1yearofmylife.com/wp-content/uploads/2013/12/F1YOML-2016-Header-image-2.jpg);}.site-header {padding: .1rem;}.site-header img {padding: 0 0 0 50px;max-width: 50%;} – I am getting close to the big image header I want on my site/desktop but when I view on my mobiles or tablets its all distorted. I have created the image in Photoshop and can trim dimensions in any way I want but it’s the coding on WordPress that is making all other viewing devices off-kilter.

Please help me write custom css that will increase the image size (current set to basic dimensions on the site until I can get the code I need that will comply with all viewing devices) and keep the changes consistent on all (or most) viewing devices. Thank you.