css - How to use padding-bottom for background image without distorting image

Question

Alright, well here is my code:

#header {
    background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-bottom: 15%;
}

It scaled correctly, just like I want, but if you visit the actual image http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png you'll see that it is quite a bit more clearer than it is when it shows up on the website. Is there a different way of doing this? Is there a way to use padding-bottom with the perfect resolution?

Thank you in advance!