Backgroud image is cut at the top and the bottom

Question

i have this jsfiddle: http://jsfiddle.net/SoSoDef/uhx3o62f/1/. It seems to work fine, the only issue is that the image will be cut of a little bit at the top and at the bottom for some reason.

-webkit-background-size: cover;

Why ?

Appreciate all your help

Just checked it out, doesn't seem to be cut off compared to the original image, could you explain more what you mean? — IronWilliamCash, Aug 12 '14 at 16:15

score 2 · Answer 1 · edited May 23 '17 at 11:57

The background image is being cut off due to CSS styling in relation to the dimensions of the JSFiddle Result viewport.

The CSS property 'background-size: cover' is constraining and scaling the image's overall proportional size based on the width of the JSFiddle viewport.

In your background property for the body style, 'center center fixed' is centering the center point of your image in a fixed position to the center of the viewport. If the scaled image (constrained by the width of the viewport) is taller than the viewport itself, the image is merely going beyond the upper and lower bounds of the JSFiddle Result viewport, and appearing clipped.

To illustrate, try removing 'center center fixed' from your background property on the body style, like this:

    body {
      background: url("http://f.cl.ly/items/260T100F3j2Y3L1S0g1w/bg.jpg") no-repeat #292929;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

The image will now position itself to the top of the viewport, and will no longer be clipped along the upper edge. Then, narrow the Result viewport, and the image will no longer be clipped along the bottom once it has sufficiently diminished in size.

I suspect that you are trying to scale your image to the available dimensions of the viewport, both horizontally and vertically. However, at any given time, you have a viewport of a random size, as well as an image that is of a certain aspect ratio. If you do not want to forcibly squash the image vertically or horizontally in order to achieve a total image fill, you must allow the image to scale in relationship to the width of the viewport (and potentially be clipped along the bottom edge), as suggested in this SO Answer.

If the content of the image cannot be clipped and must be viewable, instead of using CSS to place your image, use an 'img' element and scale that with CSS. The viewport will then be scrollable if the image content does go beyond the viewport's available dimensions.

I've created a codepen example of this latter approach for you.

Thanks. Now at the top its ok, but it still is cut off at the bottom. — SoSkandalouS, Aug 12 '14 at 16:26

score 1 · Answer 2 · edited Aug 12 '14 at 19:55

1

The background-size property let you expand and shrink according to size your div. Its responsive for more reference check out this LINK

edited Aug 12 '14 at 19:55

jacefarm

6,747
6
36
46

answered Aug 12 '14 at 16:15

Benjamin

2,612
2
20
32

score 1 · Answer 3 · answered Aug 12 '14 at 16:26

From [W3Schools]

Cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

So basically it is behaving normally, when the body gets wider, the top and bottom of the background image will be cut off.

You could use contain instead and add a white background to keep the entire image at all times.

-webkit-background-size: cover;
background-color:white;

Backgroud image is cut at the top and the bottom

3 Answers3