Setting max-height with contain for bg image

Question

Hi , I currently have a simple image that I want to sit in the top right corner, however I would like it to scale so the whole image fills the right hand of the viewport (only if they make the viewport smaller than the original image though). The contain function does this job however it also scales the image upwards should the user go full browser which looks horrible. So my question is can I use ( background-size: contain;) but add a max-height line to it also. I have tried every combination possible but nothing. Im either doing something wrong or it cant be done.
Site: http://www.stuartskelton.co.uk
my css is:
body  {
margin: 5px;
background-attachment: fixed;
background-image: url(../images/neilquote.gif);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
Thanks for looking.

Answer 1

You can't add a max-height to the existing rule, but you could use a media query to change the value of background-size like this:
body  {
margin: 5px;
background-attachment: fixed;
background-image: url(../images/neilquote.gif);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
@media screen and (min-height: 462px) {
    body {
        background-size: 55px 461px;