HTML 배경 그라디언트 반복

Question

스크롤없이 지나간 웹 페이지에 그라디언트 배경을 구현했습니다. 그라디언트가 작동하고 바닥 글까지 완벽하게 보이며 높이가 10 픽셀 인 그라디언트 시작 부분의 색상이됩니다. 따라서 그라데이션이

http://s30.postimg.org/6r64lcqkx/problem.png

그것이 "반복"되어 보인다. 나는 HTML/바디 높이를 수정 일명 시도했습니다

CSS :

html { 
    height:100% 
} 

body { 
    min-height:100%; 
} 

하지만 윈도우의 정확한 높이에 그라데이션을 반복하여 그 방금 만든 생김. 여기

순간에 몸 요소에 대한 코드입니다

CSS : Wijnand의

body { 
    background: #650000; /* Old browsers */ 
    background: -moz-linear-gradient(top, #650000 0%, #d40000 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#650000), color-stop(100%,#d40000)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #650000 0%,#d40000 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #650000 0%,#d40000 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #650000 0%,#d40000 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #650000 0%,#d40000 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#650000', endColorstr='#d40000',GradientType=0); /* IE6-9 */ 
    font-family: 'helveticaneue_bold'; 
    font-size:11px; 
} 

의례 : http://jsfiddle.net/ey7kfog3/

Answer 1

body는 대부분의 경우 모든 브라우저에서 기본적으로 마진 있습니다. 따라서 사실 수직 스크롤바는 높이를 100 %로 설정하고 100보다 높게 설정하지 않을 때 ...

DevTools 또는 Firebug에서는 이러한 기본값을 표시 할 수 있습니다 (방화 광명 : HTML/Style right, 그것은 드롭 다운에서) 몸에 8px의 여백이 있으므로 16px 크기의 몸체 (Firefox에서 반복되는 그라디언트의 정확한 값)가 100 % 이상인 것을 확인하십시오.

그냥 body { margin: 0; }을 추가하고 스크롤바 또는 반복 그라데이션이 없습니다.

바이올린 : http://jsfiddle.net/ey7kfog3/4/

편집 :이 같은 대부분의 reset.css에 존재하고 모두의 에릭 마이어의 하나 normalize

Answer 2

나는 u를 위해 고정 : Fiddle

CSS의 :

body, html { 
height:100%; 
width: 100%; 
} 
.background { 
background: #650000; /* Old browsers */ 
background: -moz-linear-gradient(top, #650000 0%, #d40000 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#650000),   color-stop(100%,#d40000)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #650000 0%,#d40000 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #650000 0%,#d40000 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #650000 0%,#d40000 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #650000 0%,#d40000 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#650000',   endColorstr='#d40000',GradientType=0); /* IE6-9 */ 
font-family: 'helveticaneue_bold'; 
font-size:11px; 
height: 100%; 
width: 100%; 
} 

html로 : 그것은 U 작동

이 희망 몸 것처럼

<div class="background"></div> 

그리고 당신이 할 수있는,

postition: fixed; 

그것은 그래서 당신은 같은 효과를 얻을 수

Answer 3

이상하게 보입니다. 왜 이런 식으로 작동하는지 모르겠습니다! 가장 빠른 해결 방법은

body { 
    min-height:94%; 
} 

모습이 FIDDLE

Answer 4

당신은 컨테이너 사업부를 사용할 수있을 것입니다. 나는 왼쪽, 오른쪽, 위쪽, 아래쪽에 0으로 고정 된 위치를 고정하여 바디 컨테이너로 작동해야하므로 오버 플로우 자동을 추가했습니다.

본문에서 스크롤 막대를 숨기십시오. 업데이트 된 fiddle을 확인하십시오.

html { 
    height:100% 
} 

body { 
    min-height:100%; overflow:hidden; 
} 
div.test {position:fixed; top:0; bottom:0; left:0; right:0; overflow:auto; 
    background: #650000; /* Old browsers */ 
    background: -moz-linear-gradient(top, #650000 0%, #d40000 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#650000), color-stop(100%,#d40000)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #650000 0%,#d40000 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #650000 0%,#d40000 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #650000 0%,#d40000 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #650000 0%,#d40000 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#650000', endColorstr='#d40000',GradientType=0); /* IE6-9 */ 
    font-family: 'helveticaneue_bold'; 
margin:0; 
}