이 간단한 예제에서 배경이 잘못 표시되는 이유

이미지를 테스트 할 때 이미지의 하단 부분의 약 30 %가 오른쪽 상단에 배치됩니다.이 간단한 예제에서 배경이 잘못 표시되는 이유

이유를 이해할 수 없습니다.

예를 들어 왼쪽 상단이나 오른쪽 상단에 위치하면 정상적으로 작동합니다.

이 예제에서와 같이 오른쪽 아래 또는 왼쪽 아래에 배치하면 절대 작동하지 않습니다.

왼쪽에 위치가있는 바닥을 주면 다시 아래쪽 부분의 약 30 %가 왼쪽 상단에 위치합니다. 여기

는 완벽한 마크 업 및 CSS입니다

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset=utf-8" /> 
     <title></title> 
     <style type="text/css" media="screen"> 
     body 
     { 
      background-image:url(uppsala.jpg); 
      background-position: bottom right; 
      background-repeat:no-repeat; 
     } 
     </style> 
    </head> 

<body> 
</body> 
</html>

출처

2013-09-07 user2658578

이미지는 body 요소의 오른쪽 아래에있는,하지만 문제는 요소가 당신이 그렇게 보이는 생각만큼 키가되지 않는 것입니다 잘못된 곳에서와 같이.

는 CSS 규칙이 추가 :

body, html { 
    min-height:100%; 
}

출처

2013-09-07 10:03:58 JJJ

귀하의 답변 작품을 높이를 선언해야하지만 난 당신이 무슨 뜻인지 이해가 안 돼요. 내 코드 만 사용하는 경우 오른쪽 하단에 아무 것도 표시되지 않고 오른쪽 상단의 30 % 만 표시됩니다. 당신이 의미하는 바를 더 잘 설명 할 수 있습니까? – user2658578

''태그가 자동으로 전체보기 화면을 덮지 않습니다. 즉 높이가 자동으로 100 %가 아닙니다. 코드에서 배경색을 본문에 추가하면 무슨 뜻인지 알 수 있습니다. – JJJ

background-color는 전체 뷰포트를 채 웁니다. 그러나 border : 1px solid red; 나는 무슨 일이 일어나는지를 볼 수있다. 이미지는 실제로 오른쪽 하단에 있습니다. – user2658578

당신은 CSS 규칙에

body,html 
     { 
      background-image:url(uppsala.jpg); 
      background-position: bottom right; 
      background-repeat:no-repeat; 
      height:100%; 
     }

출처

2013-09-07 10:07:04

이것은 충분하지 않습니다.'html'도'height : 100 %'로 설정되어야합니다. – JJJ

이 간단한 예제에서 배경이 잘못 표시되는 이유

답변

관련 문제