How to Optimize Background image for mobile

I am trying to stretch my logo across the entire header of my website http://www.thefutureglimpse.com using Hueman theme while also being able to view it correctly through mobile. So far I have been able to get the logo to display across the top but it does not resize for mobile. I have converted back to the supplied logo portion used by the theme. Also how do you make the header back ground logo a link back to the home page? The CSS I am using so far is.

#header .pad {
padding-top: 40px;
padding-bottom: 150px;
background-image: url(http://thefutureglimpse.com/wp-content/uploads/2015/01/thefutureglimpselogoBanner.png);
background-position: Right;
}

any help would be great