14

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/

Nicole
  • 219
  • 1
  • 4
  • 12
  • 2
    `text-indent: -9999px;` ? What are you trying to do? – Raptor Dec 13 '13 at 11:46
  • 2
    text-indent: -9999px, among other stylings like margin is a way to fool the search engines to thinking you have more valuable content. Whether relevant or not, it's a hack to get better SEO but can lose your sites credibility if the engines find out or if someone reports it. – C. S. Dec 13 '13 at 11:49
  • 3
    You shouldn't use `-9999px` as it causes bad performance due to a 9999px box been drawn. If you are wanting to hide text use this: `text-indent: 100%; white-space: nowrap; overflow: hidden;` – Pete Dec 13 '13 at 11:53
  • Full page code please? Is the last tag in `#breakpink` a `

    ` tag (with a set `line-height` maybe)? This issue could be caused by `

    ` tag's `margin` and/or its `line-height`

     – Vereos Dec 13 '13 at 11:55
  • 1
    Better post your problem code in jsfidlle and share its more easy to answer..! – BlackPOP Dec 13 '13 at 11:57
  • I think the `h1` tag below your `breakpink` is interfering with it. Try adding in your css `h1 { margin:0px; padding:0px; }` Another solution could be using `contain` instead of `cover` – Vereos Dec 13 '13 at 13:30
  • Doesn't work either. If I can't find a solution for this then I'll have to use contain and just change the sizes with media queries. I'd prefer to use cover, though. Since it then re-sizes automatically – Nicole Dec 13 '13 at 13:48
  • Line 125, there is a `}` exceeding. Is it a copy-paste error or is it like this in your code too? EDIT: After that, there is a `#breakpink` css declaration again...? Try to fix these little issues, then retry the `h1` thing I suggested before, I was pretty much sure that it was the problem. – Vereos Dec 13 '13 at 13:55
  • ah I had an extra #breakpink for some reason and deleted it. accidentally missed the }. Thanks! Unfortunately not the source of my problem T_T – Nicole Dec 13 '13 at 13:59
  • I edited the post above! – Vereos Dec 13 '13 at 13:59
  • Tried it again. Still not working. I used a css reset so technically the margin and padding is already set to 0? – Nicole Dec 13 '13 at 14:19
  • I guess so. Unfortunately I ran out of ideas :( – Vereos Dec 13 '13 at 14:21
  • Thanks for trying. I'll just use contain for now – Nicole Dec 13 '13 at 14:38

9 Answers9

26

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!

Community
  • 1
  • 1
Islam Elbahtiti
  • 361
  • 3
  • 6
  • 1
    I think this "drawback" can be overcome if you can afford to make assumptions about the minimum image height. For instance, `min-height: 750px;` will force the height to never go below that so when you zoom out the body background doesn't cut off the image. – ecoe Oct 19 '14 at 23:39
  • @ecoe I had a related problem and setting the min-height fixed it for me. Thanks. – Gilles Jun 04 '15 at 14:34
7

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.

Community
  • 1
  • 1
Shrishail Uttagi
  • 406
  • 6
  • 8
2
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

Oussama el Bachiri
  • 18,687
  • 3
  • 15
  • 22
1

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

leleprates
  • 11
  • 1
0

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;
}
suspectus
  • 16,548
  • 8
  • 49
  • 57
0

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

background-size: contain;

Nero
  • 422
  • 8
  • 22
0

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.

Miguel Salas
  • 692
  • 1
  • 6
  • 21
0

add a min-height property

#breakpink{

// other codes are here 

min-height: 150vh;

// to see area of the image 
border: 2px solid red;
}
JoyShaheb
  • 129
  • 1
  • 7
-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;
}
Josh Trivedi
  • 1