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

My background image get cut off at the bottom

提问by Nicole

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.

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

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?

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

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

Full code:

完整代码：

http://jsfiddle.net/duyBE/

http://jsfiddle.net/duyBE/

回答by Islam Elbahtiti

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

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

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

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

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

但是有一个缺点，那就是当您将背景与内容一起缩小时，“主体”背景会出现在底部！

回答by Shrishail Uttagi

Use "background-size: contain" instead of "background-size: cover",

使用“背景尺寸：包含”而不是“背景尺寸：封面”，

1 background-size : cover

1 背景尺寸：封面

Property value "cover" will make the image to cover available space, if the image is small then it will be scaled up to cover available space, If the image is big then it will be scaled down to cover the available space, in either case, there is a chance that image may get cropped in order to fill the available space.

属性值“cover”将使图像覆盖可用空间，如果图像较小，则将其放大以覆盖可用空间，如果图像较大，则将缩小以覆盖可用空间，无论是哪种情况，图像可能会被裁剪以填充可用空间。

Pros: It will cover the entire available space. Cons: Image may get cropped.

优点：它将覆盖整个可用空间。缺点：图像可能会被裁剪。

2 background-size : contain

2 背景大小：包含

"contain" will make the image scale up or down to fit inside the available space. Pros: Full image is displayed. Cons: Image may be look stretched. And sometimes you will see empty space around the image.

“包含”将使图像放大或缩小以适应可用空间。优点：显示完整图像。缺点：图像可能看起来很拉伸。有时您会在图像周围看到空白区域。

回答by Oussama el Bachiri

html { 
    background: url(../images/break_pink.svg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This will probably fix your problem

这可能会解决您的问题

回答by leleprates

I was having a similar problem. I've added a padding-bottom: 10px; and it worked for me.

我遇到了类似的问题。我添加了一个 padding-bottom: 10px; 它对我有用。

回答by Nero

Had similar issue where the bottom of my header image was getting cut off. Resolved it by using

有类似的问题，我的标题图像的底部被切断了。通过使用解决它

background-size: contain;

背景大小：包含；

回答by Miguel Salas

I had a similar issue. It turned out that the image file was damaged in some strange way. Opening the image in the file system worked, the image was OK, but it produced this error in the browser. I deleted the image file and downloaded it again and the image was displayed appropiately with the css rules.

我有一个类似的问题。结果是图像文件以某种奇怪的方式损坏了。在文件系统中打开图像工作正常，图像正常，但在浏览器中产生此错误。我删除了图像文件并再次下载，图像与 css 规则正确显示。

回答by Josh Trivedi

body{
    margin: 0;
    padding: 0;
    background: url(image.jpg);
    background-size: auto;
    background-size: cover;
    height: 100%;
    text-indent: -9999px;
    margin-bottom:10px;
    background-position: center;
    font-family: sans-serif;
}

回答by suspectus

add a margin at the bottom of the element:

在元素底部添加边距：

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