CSS의 선형 그라디언트가 수직으로 반복되지 않습니다.

내 배경 선형 그래디언트가 내 콘텐츠 영역 끝을지나 반복적으로 반복하는 데 문제가 있습니다. 나는 repeat-y를 시도했고 반복했다. 그리고 나는 그 밖의 무엇을 해야할지 모른다. http://jsfiddle.net/derbyshirehayes/ZhsQH/CSS의 선형 그라디언트가 수직으로 반복되지 않습니다.

HTML 코드 :

<html> 
<head> 
<title>hiii582</title> 
<link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 

<body> 
    <div id="gradient_background">`` 
    <div id="wrap"> 
    <div id="padding1"></div> 
    <div id="header"> 
     <img src="images/header.png"/> 
    </div> 
    <div id="padding1"></div> 
    <div id="navigation_bar"> 
     <img src="images/navigation_bar.png"/> 
    </div> 
    <div id="padding"></div> 
    <div id="content_area"> 
     <img src="images/content_area.png"/> 
    </div> 
    <div id="padding"></div> 
    </div> 
    </div> 
</body> 
</html>

CSS 코드 :

body { 
    margin: 0px; 
    padding: 0px; 
} 

#wrap { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#gradient_background { 
    background-image: -webkit-linear-gradient(top, #8c9bb2 0%, #5b8fdf 100%); 
    background-repeat: repeat-y; 
} 

#header { 
    width: 900px; 
    height: 100px; 
    background-image: url('images/header.png'); 
    background-repeat: no-repeat; 

} 

#navigation_bar { 
    width: 901px; 
    height: 36px; 
    background-image: url('images/navigation_bar.png'); 
    background-repeat: no-repeat; 

} 
/* Padding between navigation bar and content */ 
#padding { 
    padding: 10px; 
} 

#padding1 { 
    padding: 5px; 
} 
#content_area { 
    width: 899px; 
    height: 404px; 
    background-image: url('images/content_area.png'); 
    background-repeat: no-repeat; 

}

당신은 당신의 HTML 100 % 높이에 줄 필요가

출처

2013-09-28 Hayes Derbyshire

귀하의 질문은 조금 혼란 스럽습니다 ... #content_area에만 적용할까요? –

아니요, 내 웹 사이트의 배경에 적용하고 싶습니다.하지만 콘텐츠 영역에 도달 할 때까지만 내려갑니다. –

여기 출력이 어떻게 생겼는지의 미리보기입니다

html{ 
    height: 100%; 
}

본문은 부모 (html)의 높이를 보니 fiddle을 살펴볼 수 있습니다. 당신이 그들 사이를 더 잘 구별 할 수 있도록 서로 다른 색으로 모든 div를 그렸습니다

출처

2013-09-29 05:45:26

CSS의 선형 그라디언트가 수직으로 반복되지 않습니다.

답변

관련 문제