HTML 배경 이미지는

이 페이지에서보세요 스크롤되지 않습니다. 검은 색 div 안에있는 내용은 잘 스크롤되지만 이미지는 고정됩니다. 어떻게이 이미지를 스크롤하게 할 수 있습니까?HTML 배경 이미지는

기본적 I는 다음과 같은 주요 래퍼 정의 :

body{ 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    margin: 0px; 
} 

#generalWrapper{ 
    height: 100%; 
} 

#header{ 
    height: 70px; 
    width: 100%; 
    background: #080808; 
} 

#content{ 
    overflow: auto; 
    position: absolute; 
    width: 100%; 
    top: 70px; 
    bottom: 0; 
    background: url("../images/background.jpg"); 
    background-repeat: repeat-y; 
}

을이어서

<body> 
    <generalWrapper> 
     <header> 
     </header> 
     <content> 
     </content> 
    </generalWrapper> 
</body>

같은 구성에 의해, 콘텐츠 div은 화면보다이 div 키 확인되는 (원소로 채워진다 스크롤 가능성을 가져온다). 그러나 배경 이미지가 왜 영향을받지 않습니까? 당신이 당신의 contentdiv 내부 div의 스크롤되지만, contentdiv 자체가 스크롤되지 않는 것처럼

출처

2013-02-18 Valentino Ru

더 넓은 배경 이미지를 사용하는 것이 좋습니다. 저는 2560px 와이드 모니터를 사용하고 있으며 배경은 화면의 너비의 약 3/4을 차지합니다. 나머지는 단색 흰색 배경입니다. – Jules

다른 접근 방식을 시도했습니다. 우선, 나는 그런 다음 속성

html{ 
    background: url("../background.jpg") center center #000; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

과 함께 HTML에 배경 이미지를 넣어, 나는 (

내가 원하는 바로 그 행동 결과

#header{ 
    height: 70px; 
    width: 100%; 
    background: #080808; 
    position: fixed; 
    z-index: 55; 
    box-shadow: 5px 5px 5px 5px #080808; 
} 

#content{ 
    position: absolute; 
    width: 100%; 
    top: 70px; 
    bottom: 0; 
}

에 헤더와 내용을 변경 한 비록 코멘트에서 Jules Mazur가 고려한 문제는 해결되지 않았습니다. 다른 해결 방법으로 서로 다른 이미지를 제공하여 해결하려고 노력할 것입니다.)

출처

2013-02-20 00:18:39

는 것 같습니다. W3C's Markup validator으로 사이트에서 발견 된 오류 목록을 살펴보십시오.

출처

2013-02-18 20:16:55 Olexiy

background-attacment을 scroll으로 설정해보십시오. MDN에이 속성에 대한 문서가 있습니다.

출처

2013-02-18 20:20:38 Jules

Jules, 필요한 경우 MDN https://developer.mozilla.org/es/docs/CSS/background와 같은보다 유효한 소스를 사용하려면 W3School을 사용하지 말고 W3School을 사용하지 않는 것이 좋습니다. http : //w3fools.com/ – leopic

leopic, 그 웹 사이트는 왜 W3Schools가 피해야하는지 언급하지 않습니다. W3Schools에 대해 "평판이 좋지 않은"것은 무엇입니까? 적어도 4 년 후에는 여전히 Google 검색 결과의 상단에 표시됩니다. 그렇다면 그 내용은 무엇입니까? – thefoyer

@thefoyer 인기는 신뢰성의 지표가 아닙니다. W3Schools는 지속적으로 시대에 뒤 떨어지고 자주 잘못되었습니다. 프로그래밍에 참여한지 4 년이 지난 지금 나는 정교하게 말하면 MDN이 고품질의 웹 표준 문서화에있어 사실상의 권위라고 말할 수 있습니다. – Jules

HTML 배경 이미지는

답변

관련 문제