html - 我的背景图片在底部被截断

Question

我的网站必须具有响应能力，我应该将其构建为“移动优先”。 这是一个单页网站，每个部分都由一个 svg 图像划分。

到目前为止，我已经通过使用 background-size:cover; 完美调整了宽度，但图像底部的一小部分被截掉了。我试过调整高度(自动、100%、随机像素值)，但这似乎没有任何作用:/ 有什么想法吗？

#breakpink{
    background-image: url(../images/break_pink.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    text-indent: -9999px;
}

完整代码:

http://jsfiddle.net/duyBE/

Answer 1

同样的问题发生在我身上。此页面上已接受的答案中发布了此问题的解决方案:CSS: Full Size background image

解决方案是使用:background-size: 100% 100%

但是有一个缺点，就是当你缩小背景和内容时，“body”背景出现在底部!