100% width background image top cut off

Question

When I use the following with a 1920x1080 pic (or for other resolutions I've tried), the very top of the picture gets cut off. Is there any way to prevent this?

div.background {
    background-image: url("/images/home.jpg");
    background-repeat: no-repeat;
    position: absolute; 
    height: 100%; 
    width: 100%;
    margin-top: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-position: 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}

div.header {
    background-color: red;
    width:100%;
    height: 100;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    padding: 0px 0px 0px 0px;

}

body {
    margin: 0px 0px 0px 0px;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main2.css">
</head>
<body>
<div class="header"></div>
<div class="background"></div>
</body>
</html>

score 3 · Answer 1 · edited May 23 '17 at 12:16

That's what background-size: cover does, makes it so that your background image is scaled, while maintaining aspect ratio, to cover the entirety of its container. If the aspect ratio of the image and the div do not match, you get clipping.

If you can guarantee that your background image will always have the same aspect ratio, you could do something like this:

div.background {
    background-image: url("/images/home.jpg");
    background-repeat: no-repeat;
    position: absolute; 

    /* these lines are the important bits */
    height: 0;
    padding-bottom: 56.25%;
    box-sizing: border-box;

    width: 100%;
    margin-top: 100px;
    top: 0;
    /* bottom: 0; */
    left: 0;
    /* right: 0; */
    z-index: 0;
    background-position: 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}

Relative padding and margins are all based on width, not height. Using that specific percentage causes the div to have an aspect ratio matching the image, 16:9. Having the same aspect ratio means that no clipping will occur when using cover. See this answer on the topic.

border-box causes the height and width to include the padding and border sizes but not margin size, preventing margin from effecting the div's dimensions.

Woah! Complicated response, I'll have to weed through it, but this is totally it. Thank you :-) — cente, Jul 29 '16 at 01:51

score 1 · Answer 2 · answered Jul 28 '16 at 23:03

change the margin-top on your div.background to 0px. That will remove the cut off from the picture

div.background {
background-image: url("/images/home.jpg");
background-repeat: no-repeat;
position: absolute; 
height: 100%; 
width: 100%;
margin-top: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
background-position: 50% 50%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

}

100% width background image top cut off

2 Answers2