CSS image resize horizontally

div.image {
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
    background-position: center;
    background-repeat: no-repeat;
    width: 500px;
    height: 500px;
}

I use the above css code to diplay a 500×500 image. It shows well on screen however, is there a way that when I resize the window vertically then the image to not resize at all (scrollbars appear) but when I resize the window horizontally to resize too so that its new width fit the screen? Thanks

Dont specify width and height in PX Insted use %

div.image {
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
    background-position: center;
    background-repeat: no-repeat;
    width: 50%;
    height: 50%; /* both as much you want */
}

Or else use media query.