My background image get cut off at the bottom

2020-08-22 06:00发布

问题:

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.

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

Full code:

http://jsfiddle.net/duyBE/

回答1:

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

The solution was to use: 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!



回答2:

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

1 background-size : cover

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.

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

2 background-size : contain

"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.



回答3:

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



回答4:

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



回答5:

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


回答6:

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

background-size: contain;



回答7:

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.



回答8:

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


标签: html css image svg