CODEWITHSUNDEEP
htmlcssimagesvg
Nicole
Nicole

Reputation: 247

My background image get cut off at the bottom

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/

Upvotes: 16

Views: 101219

Answers (10)

ComplexSymbol
ComplexSymbol

Reputation: 81

The only thing that worked to fix it getting cut off on the bottom was to add overflow: overlay; and padding-bottom: {num}px;

Upvotes: 1

JoyShaheb
JoyShaheb

Reputation: 548

add a min-height property

#breakpink{

// other codes are here 

min-height: 150vh;

// to see area of the image 
border: 2px solid red;
}

Upvotes: 0

Josh Trivedi
Josh Trivedi

Reputation: 1

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

Upvotes: -1

Shrishail Uttagi
Shrishail Uttagi

Reputation: 436

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.

Upvotes: 7

Miguel Salas
Miguel Salas

Reputation: 701

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.

Upvotes: 0

Nero
Nero

Reputation: 592

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

background-size: contain;

Upvotes: 0

leleprates
leleprates

Reputation: 11

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

Upvotes: 1

Islam Elbahtiti
Islam Elbahtiti

Reputation: 391

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!

Upvotes: 29

user_2215528
user_2215528

Reputation: 19987

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

Upvotes: 2

suspectus
suspectus

Reputation: 17258

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

Upvotes: 0

Related Questions