Scaling background image with css only cuts it off, doesn't change the scale

问题

I'm trying to scale down a background image with css. My browser has it scaled all the way to it's maximum resolution, and nothing that should work, is working.

When I try and use max-width it doesn't scale the image, it only cuts off the right edge of the image, and it stays at the same scale.

Here's my CSS

.proj-header{ /* Settings for projects bgr image */
    position: relative;
    bottom: 20;
    height: 450;
    background-image: url(pics/fight_shy_lot.jpg);
    background-repeat:no-repeat; 
    background-position: 50% 38%;
    max-height: 40%;
    max-width: 100%;
    background-attachment: fixed;
    background-position: center;

}

I don't think html is important as it's just an empty div. Everything is in the css.

The only thing I could get to work is background-size, but it lead to issues when the viewport is resized from my base res.

So my questions is why isn't max-width doing what everyone says it should be doing, or am I using it wrong?

I'm pretty new to web design so I'm sorry if this is a stupid question, but I searched all over for an answer, and all people say is to use max-width, which doesn't do anything for me.

来源：https://stackoverflow.com/questions/33323023/scaling-background-image-with-css-only-cuts-it-off-doesnt-change-the-scale