[Theme: Header, Responsive, CSS] Image fails to resize

The theme header doesn’t follow the page width, which results in a blurry/cropped image when the website is viewed on a small monitor or mobile device. {as show in the pictures below}

Link to: Normal PC browsing view
Link to: Mobile device view w/ problem
{Green line shows intended image placing}

CSS header

.art-header
{
   margin: -5px 0 0 -5px;
   height: 40px;
   background-image: url('images/header.png');
   background-position: 0 0;
   background-repeat: no-repeat;
   position: relative;
   z-index: auto !important;
}

.responsive .art-header
{
background-image: url('images/header.png');
background-position: center center;
max-width: 97.5%;
   /* max-width: 480px; */

}

.art-header>.widget
{
   position:absolute;
   z-index:101;
}

Link to: Page(s) where the problem occurs

Does anyone have a solution to fix this? Thanks!