如何在不扭曲图像的情况下使用填充底部的背景图像

Question

好的，这是我的代码：

#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%;
}

它正确缩放，就像我想要的那样，但是如果你访问实际图像http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png，你会发现它比它出现在网站上时要清晰得多。有没有不同的方式这样做？有没有办法使用填充底部和完美的分辨率？

提前谢谢！

Answer 1

尝试将图像分辨率大小加倍

Answer 2

我所做的是使用两个背景图像，“徽标”是固定的，我使背景图像水平重复，它就可以了。