2013-02-18 3 views
3

enter image description here 배경색으로 그라디언트가 있지만 반복적입니다. 그라디언트를 전체 화면으로 늘려줌으로써 축소하고 공백이나 반복되는 그라디언트를 볼 수 없도록하십시오.전체 화면 배경색 css3

는 여기에 테스트 페이지에 코드를 붙여 몸

body { 
text-align:center; 
background: rgb(238,238,238); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(89,89,89,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(89,89,89,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(89,89,89,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(89,89,89,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(89,89,89,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(89,89,89,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#595959',GradientType=0); /* IE6-9 */ 
} 
+0

당신이'HTML을 설정 해봤 {높이 : 100 %; }'? – hsan

+0

@hsan은 줌 아웃 할 때 작동하지만, 확대하면 그라디언이 반복됩니다. 나는 당신이 지금 그것으로 일어나고있는 것을 볼 수 있도록 이미지를 업로드 할 것이다. –

답변

9

시도가 background-attachment를 사용하려고도 body에 높이와 너비를 설정하기 :

html, body 
{ 
    width: 100%; 
    height: 100%; 
} 
body 
{ 
    … 
    width: 100%; 
    height: 100%; 
    background-attachment: fixed; 
} 
+0

치료를했습니다. 고맙습니다. –

2

내 CSS를이고 그것을 당신이 원하는 것을 정확하게 일을 할 것 같다. 문제가 있다면 어쩌면 추가 할 수 있습니다. background-size: 100%;

희망이 있습니다.

+0

지금 확대했을 때의 모습을 게시했습니다. 코드가 제대로 작동하지 않습니다. –

관련 문제