대부분/모든 브라우저에서 작동하는 그라데이션 배경을 만드는 방법은 무엇입니까?

Question

다음은 내가 원하는 것입니다.

1- 위와 아래의 그라데이션 배경입니다. 2 가지 색상이 있어야하며 color1과 color2를 호출 할 수 있습니다.

2 그라디언트를 약 한 페이지로 만들려면 color1로 시작하여 color2로 한 페이지 아래로 끝내야합니다.

3- 그런 다음 color2를 페이지의 크기에 관계없이 계속 사용하겠습니다.

아마도 이것이 가능할까요?

감사

Answer 1

당신은 넓은 수직 당신이 무엇을 당신의 "페이지 크기"에 대해 원하는 길이 몇 픽셀 인 이미지를 만들 수 있습니다.

CSS에는 repeating of an image을 제어 할 수있는 방법이 있습니다. 따라서 repeat-x를 사용하여 이미지를 왼쪽에서 오른쪽으로 반복 할 수 있습니다. 그런 다음 두 번째 색상이 무엇이든간에 사이트의 배경색을 설정하면 콘텐츠가 더 이상 확장되면 사용자는 Color2 만 볼 수 있습니다.

CSS

body { 
    background-color: #b5b5b5; /*gray*/ 
    background-image: url(./images/body_bg_gray_1380px.gif); /*path to wherever your bg img is...*/ 
    background-repeat: repeat-x; 
} 

Answer 2

사용 짧은 손 표기법 :

body {background:url(images/body_bg_gray_1380px.gif) repeat-x #b5b5b5}