너비 100 % 배경 이미지 위로 잘라 내기

-1

1920x1080 이미지 (또는 시도한 다른 해상도의 경우)를 사용하면 그림의 맨 위가 잘립니다. 이것을 막을 수있는 방법이 있습니까?너비 100 % 배경 이미지 위로 잘라 내기

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>

출처

2016-07-28 cente

div.background의 여백 상단을 0px로 변경하십시오. 즉, background-size: cover가하는 일의 컨테이너 전체를 커버하는, 가로 세로 비율을 유지하면서 배경 이미지가 조정됩니다 있도록 만드는 사진

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;

}

출처

2016-07-28 23:03:40 Alastair

여기에는 헤더가 덮여 있습니다. – cente

에서 컷을 제거합니다. 이미지의 종횡비와 div이 일치하지 않으면 클리핑이 발생합니다. 당신이 당신의 배경 이미지는 항상 같은 비율있을 것이라는 점을 보장 할 수있는 경우

, 당신은 이런 식으로 뭔가를 할 수 :

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

상대 패딩과 마진이 모두 width하지 height을 기반으로합니다. 해당 비율을 사용하면 div이 이미지와 일치하는 종횡비 인 16 : 9를 갖습니다. 같은 종횡비를 사용하면 cover을 사용할 때 클리핑이 발생하지 않습니다. 주제에 대한 내용은 this answer을 참조하십시오.

border-box는 div의 측정을 행에서 margin 방지 padding와 border 크기 아니지만 margin 크기를 포함하도록 height와 width시킨다.

출처

2016-07-28 23:11:02 Ouroborus

와아! 복잡한 응답, 나는 그것을 통해 잡초를해야하지만, 이것은 완전히 그것입니다. 고맙습니다 :-) – cente

너비 100 % 배경 이미지 위로 잘라 내기

답변

관련 문제