我的背景图片在底部切断 [英] My background image get cut off at the bottom

问题描述

我的网站必须具有响应性，我应该建立它移动优先。
这是一个单页网站，每个部分除以svg图像。

My site has to be responsive and I'm supposed to build it "mobile-first". It's a one page site and each section is divided by an svg image.

到目前为止，我已经通过使用 background-size：cover; 但是图像底部的一小部分被切掉了。我尝试调整高度（自动，100％，随机像素值），但似乎没有做任何事情：/
任何想法？

So far I've gotten it the width resize perfectly by using background-size:cover; but a small part at the bottom of the image gets cut off. I've tried adjusting the height (auto, 100%, random pixel value) but that doesn't seem to do anything :/ Any ideas?

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

完整代码：

http://jsfiddle.net/duyBE/

推荐答案

我发生了同样的问题。此问题的解决方案发布在此页面的已接受答案中： CSS：全尺寸背景图片

Same problem happened for me. There is a solution for this problem that is posted in the accepted answer on this page: CSS: Full Size background image

解决方案是使用：background-size：100％100％

The solution was to use: background-size: 100% 100%

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

But there was a drawback, that is when you zoom out the background along with the content, the "body" background appears at the bottom!

这篇关于我的背景图片在底部切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！