HTML 배경 이미지가 화면에 나타나지 않습니다.

내 탐색 막대 위에 전체 너비 이미지를 만들려고하지만 이미지를 화면에 표시 할 수 없습니다.HTML 배경 이미지가 화면에 나타나지 않습니다.

<html> 
    <body> 
    <div class="wrapper" /> 
    </body> 
</html>

그리고 CSS : 여기 내 간단한 HTML이다

.wrapper { 
    background-image: url(../assets/bridge.jpg); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    width: 100%; 
    height: 100%; 
}

나는 JPG 내 브라우저에서 그것을 만들었고, 내 자원에 클릭 할 수 있습니다 참조, 그래서 문제는 경로가 없다 . 화면이 여전히 공백이며 아무 것도 표시하지 않습니다. 어떤 도움이라도 굉장합니다.

출처

2013-05-03 jhamm

그냥 궁금해서 '몸'에 배경을 설정하지 않으시겠습니까? – Aquillo

당신은'body''background'에서이'image'를 사용해야합니다. –

height:100%은 기능적으로 쓸모가, 당신의 사업부가 resultingly에는 높이가 없기 때문이다 : 나는 또한 당신의 코드를 변경합니다.

div에 고정 된 높이를 지정하면 이미지는 appear as expected입니다.

또는 배경 이미지를 페이지의 배경에 적용하려면 <html> 요소에 적용하고 전체 래퍼 인 100 % 오류를 피할 수 있습니다.

html { 
    background-image: url(../assets/bridge.jpg); 
    background-repeat: no-repeat; 
    background-size: 100%; 
}

출처

2013-05-03 10:51:44 Kiirani

+1 왜냐하면 높이가 100 %는 기능적으로 쓸모가 없기 때문이며'height : 100 %'에 동의합니다. 결과적으로'height'가 없습니다. . –

FYI :'height : 100 %'는 일반적으로 "기능적으로 쓸모 없지"않다. - 그러나 그것은 단지'auto'뿐만 아니라 자체의 명시적인'height'를 가진 부모 요소에 달려있다. – CBroe

@CBroe - 정확! 'position : absolute' 또는'position : fixed'로 일반 페이지 플로우에서 제거되면'height : 100 %'가 (일반적으로 대부분의 사람들이 예상하는 것처럼) 요소 viewport-height를 제공한다고 언급 할 가치가 있습니다. – Kiirani

노력이 <div class="wrapper"></div>

출처

2013-05-03 10:47:02

거기 사업부 내에 내용이없고 따라서 크기가 설정된 크기로 폭과 높이를 설정 0에 한번이다 때문에 이미지가 200 픽셀처럼 뭔가 게재되지 않도록 할 수있다 이 이론을 시험해보기.

<div class="wrapper"> </div>

출처

2013-05-03 10:50:23 CreativeAbyss

http://jsfiddle.net/dolours/JcxLm/2/ 특정 높이를 부여, 높이 100 %

.wrapper { 
    background-image: url(../assets/bridge.jpg); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    width: 100%; 
    height: 50px; 
}

출처

2013-05-03 10:56:46 Dolo

당신이 몸 태그에 CSS를 사용할 수 있습니다 의미가, 몸의 CSS는 다음과 같이 될 것입니다 :

body{ 
    background: url(../assets/bridge.jpg) center top no-repeat; 
}

난 당신이 배경 이미지를 원한다면 그것은 당신을 위해 일할 것이라고 생각합니다.

출처

2013-05-03 10:59:12

HTML 배경 이미지가 화면에 나타나지 않습니다.

답변

관련 문제