전체 크기의 영웅 - 배경이 작동하지 않습니다.

영웅 유닛의 전체 크기 배경을 갖고 싶습니다.전체 크기의 영웅 - 배경이 작동하지 않습니다.

HTML

<div class="hero"> 
    <h1> hello world </h1> 
</div>

CSS

.hero { 
    background:url(../images/header1.png) no-repeat center center; 
    background-size:cover; 
    min-height:100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
}

내 솔루션의 문제 : 배경 내 제목 그대로에만 높은 다음 코드를 사용했다. 그러나 크기는 콘텐츠에 의존해서는 안되며 시청자의 해상도에 따라 달라집니다.

다음은 완벽한 예입니다. https://www.zirtual.com/이 영웅 유닛에도 전체 화면 배경 이미지가 있습니다. 그게 다야, 나도 그걸 가지고 싶다.

출처

2014-10-16 user3644606

가'높이 추가 : 100 %;'와'폭 : 100 %; 'HTML'로, body'뿐만 있는지'DIV합니다. 영웅 '은 높이가 명시된 다른 요소에 없습니다. – insertusernamehere

감사합니다. 도움이되었습니다. 더 나은 이해를위한 약간의 설명, 왜 내가 전에 일을하지 않았습니까? – user3644606

다음은이 주제를 다루는 작은 기사입니다 : [요소의 높이를 어떻게 100 %로 설정합니까?] (http://webdesign.about.com/od/csstutorials/f/set-css-height-100- percent.htm) – insertusernamehere

html, 몸체 높이 및 너비가 100 %인지 확인하십시오.

출처

2014-10-16 13:49:44 Sattar

body 및 html 태그는 100% 높이, .hero 클래스는 높이를 설정해야합니다. 이처럼

이

body, html { 
    height: 100%; 
} 

.hero { 
    height: 100%; 
    background: url("../images/header1.png") no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

JSFiddle Demo

출처

2014-10-16 14:01:12

전체 크기의 영웅 - 배경이 작동하지 않습니다.

답변

관련 문제