My background image get cut off at the bottom

user_2915059 0
Viewed 82735

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/

svg css image html
9 Answers

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.

user_57025460

add a min-height property

#breakpink{

// other codes are here 

min-height: 150vh;

// to see area of the image 
border: 2px solid red;
}
user_133063380 
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;
}
user_121192170
Related