100vh의 배경 표지 이미지

그래서 100vh로 표지에 이미지를 설정하려고합니다. 그러나 매우 구체적인 상황이 있습니다.100vh의 배경 표지 이미지

내 이미지에는이 플레이트에 "누워있는"큰 판과 타블렛이 있습니다.

내 목표는이 이미지를 100vh 헤더로 만드는 것입니다. 문제가 있습니다. 큰 모니터에서 테스트해볼 때 괜찮아 보이지만 작은 높이의 모니터에서는보기가 나쁩니다.이 태블릿이 100 % 모든 데스크톱 장치에 표시됩니다.

내가보기에 "전체 페이지"옵션으로 내 피들을 확인하십시오.

타블렛없이이 이미지 커버를 만든 다음, 타블렛과 position:absolute으로 다른 이미지를 놓으려고 시도하지만 두 번째 이미지가이 플레이트에 프레임과 똑같은 위치에 있지는 않습니다.

내가 원하는 것을 얻을 수 있습니까?

.cover { 
 
    position: relative; 
 
    height: calc(100vh - 80px); 
 
    background-size: cover; 
 
    background-position: bottom; 
 
    background-repeat: no-repeat; 
 
    background-image: url(https://s4.postimg.org/uwxudv17x/cover.png); 
 
}

<body> 
 
    <div class="cover"> 
 
    </div> 
 
</body>

출처

2016-08-16 user2456849

모든 데스크톱 장치에 대한 빠른 해결 방법은

background-position: bottom right;

출처

2016-08-16 18:07:00

확인을 설정하는 것입니다하지만 난 한 가지 더 말을해야 - 내 페이지에 내가 80 픽셀 높이가 탐색이있다. 더 큰 화면에서보기에는 좋지만 작은 모니터 (780 높이와 같은)에서는 타블렛이 완전히 보이지 않습니다. 그래서 어쩌면 내가 배경 위치와 같은 뭔가가 필요합니다 : 하단 - 80px 오른쪽; 어쩌면 당신은 내 웹 사이트를 확인하여 내가 무엇에 관한 것인지, 나를 도울 수 있습니다 : http://virtualnemenu.pl/ – user2456849

정확하게 이해할 수 있을지 모르지만 margin-top : 80px; # home-header로 보내면이 문제가 해결됩니다. –

Thx - 일부 조정으로 인해 문제가 해결되었습니다. – user2456849

100vh의 배경 표지 이미지

답변

관련 문제