Линейный градиент в CSS не повторяется вертикально

У меня возникает проблема с тем, что мой фоновый линейный градиент повторяется в конце моей области содержимого. Я попытался повторить-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; 

}

источник

2013-09-28 Hayes Derbyshire

Ваш вопрос немного, но запутанный ... Вы хотите, чтобы ваш градиент применялся только к #content_area? –

нет, я хочу, чтобы он был применен на фоне моего сайта. Но он только спускается, пока не достигнет области содержимого –

Вы должны дать вашему HTML 100% высоты:

html{ 
    height: 100%; 
}

Потому что тело смотрит на высоту его родителя (html) Вы можете посмотреть на это fiddle. Я нарисовал все divs разными цветами, чтобы вы могли лучше различать их.

источник

2013-09-29 05:45:26

Линейный градиент в CSS не повторяется вертикально

ответ

Смежные вопросы