Header image responsive?

Hi there, I had the same issue and the solutions I found that resized the image kept distorting it and made it look a bit pants. I adapted the recommended code to change the whole image at certain screen widths which has made the site look much better especially at the lower (400px) widths when the theme goes into a single column.

The code I used is below, you will need to fiddle with sizes to get it looking right.

@media screen and (max-width: 768px) {
   #masthead {
   	margin-bottom: 300px;
   }
   #parallax-bg {
        background-repeat: no-repeat;
	background-size: 768px 300px;
   }
}

@media screen and (max-width: 767px) {
   #masthead {
        height: 200px;
   	margin-bottom: 100px !important;
   }
    #parallax-bg {
        background-image: url(YOUR IMAGE URL HERE.jpg) !important;
         background-repeat: no-repeat;
         background-size: 458px 131px;
         margin-top: 120px;
}

@media only screen and (max-width: 400px) {
   #masthead {height: 400px;
         padding_top: 20px;
         margin-bottom: 30px  !important;
   }
   #parallax-bg {
        background-image: url(YOUR IMAGE URL HERE.jpg) !important;
        background-repeat: no-repeat;
        background-size: 312px 264px;
        margin-top: 120px;
 }
}

You can see it in action here: Gooseberry Design

HTH