본문 요소에 이미지를 페이지 상단에 첨부 (img의 스크롤 없음).

다음과 같은 문제가 있습니다. 나는 그것을 할 수있는 빠른 방법이 있다고 생각하지만, 지금은 그것을 해결할 방법을 찾을 수 없습니다.본문 요소에 이미지를 페이지 상단에 첨부 (img의 스크롤 없음).

그래서 이미지가 있고 배경 이미지로 사용하고 싶습니다. <body> 요소의 페이지 상단에만입니다. 현재 아래로 스크롤하면 현재 페이지의 맨 아래로 이동합니다.

i를 folllowing 코드가 있습니다

body { 
    color: #d0d0d0; 
    font-family: Verdana, Tahoma, sans-serif; 
    font-size: 12pt; 
    font-weight: 400; 
    font-style: normal; 
    line-height: 1.5; 
    text-rendering: optimizeLegibility; 
    -webkit-font-smoothing: antialiased; 
    margin: 0; 
    z-index: 0; 
    background:url(../img/main-bg-top.png) no-repeat top center; 
    background-attachment: fixed; 
    background-size: cover; 
}

출처

2014-09-20 user3661795

그럼 당신이 다른 클래스를 만들고 모든 콘텐츠의 전에 삽입 할 수,이 같은 : Jsfiddle

body { 
    color: #d0d0d0; 
    font-family: Verdana, Tahoma, sans-serif; 
    font-size: 12pt; 
    font-weight: 400; 
    font-style: normal; 
    line-height: 1.5; 
    text-rendering: optimizeLegibility; 
    -webkit-font-smoothing: antialiased; 
    margin: 0; 
    z-index: 0; 
    background:#000; 
} 
.top-image{height:0;} 
.top-image img{max-width: 100%;} 
.container{height:900px; }

HTML을 :

<div class="top-image"> 
    <img src="http://www.wormzweb.com/images/photoalbum/album_28/nature_2118.jpg"> 
</div> 
<div class="container"> 
    <p>random text.</p> 
</div>

이것은 당신을 위해 최선의 방법과이 코드를 작성하는 적절한 방법을 사용하는 빠른 스케치, 해결 방법이었습니다.

출처

2014-09-20 06:39:49

시도했지만 어떤 이유로 작동하지 않았습니다. 너의 방법을 시험해 볼게. – user3661795

당신은 형제 환영합니다;) pls 내 대답을 올바른 것으로 표시 고려하십시오. –

표시 및 환영합니다.) – user3661795

본문 요소에 이미지를 페이지 상단에 첨부 (img의 스크롤 없음).

답변

관련 문제