My site is an old version site, where you can make custom themes with html and css. I am using a custom theme with separate css for desktop and mobile.

I was experimenting with some of the responsive themes and noticed that the banner image will automatically re-size if the div becomes smaller than the width of the image.

I am trying to re-create this behavior on the desktop version of my own theme but it's not working. When the div containing the banner becomes smaller than the banner image, the image gets cut off instead of re-sizing.

When I use a % relative width for the pagewidth, everything else is re-sizing correctly except for the banner image. 

I tried adding the following CSS, which did not work.

.banner img {

  max-width: 100%;

  height: auto;

}

Taking a look at sources in Chrome, it looks like my CSS is over-ridden because the banner image dimension is hard-coded in the HTML.

I don't know how the responsive themes are working, because those also have the banner dimension hard coded in the HTML.

How can I make my theme for desktop behave the same way as the responsive themes and re-size the banner image when the banner container is using a % size and it becomes too small?