CSS: Градиент применяется только к половине фона, но цвет фона фона применяется ко всей странице?

Так что я пытаюсь сделать, это добавить небольшой градиент на весь фон сайта под заголовком и панель навигации. Я хочу добавить это в тело и просто не иметь фона на контейнере. Случается, что если я сделаю контейнер градиентом, он применим к контейнеру, а тело останется ниже как любой цвет или просто пробел.CSS: Градиент применяется только к половине фона, но цвет фона фона применяется ко всей странице?

Если я делаю тело градиентом и не устанавливаю фон контейнера в none, я получу нечетный темный градиент на фоне контейнера и правильный градиент в нижней половине (половине тела) страницы. Вот код, который делает это:

Мой HTML:

<body> 

<div id="header"> 

    <h1>stuff</h1> 
    <p>more stuff</p> 

</div> 

<div id="navbar"></div> 

<div id="container"> 

    <div id="main_text"> 
     main text of site 
</div> 
</div> 
</body>

А вот мой CSS:

#container { 
margin: 0 auto; 
padding-left: 0px; 
padding-right: 0px; 
overflow: hidden; 

background: none; 
} 
#navbar { 
padding: 0px; 
height: 30px; 
width: auto; 
background-position: bottom; 
background-color: #000; 
} 
#main_text { 
margin: auto; 
margin-top: 20px; 
overflow: hidden; 
width: 1000px; 
border: 1px outset #000; 
padding-top: 10px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
background-color: #FFF; 
} 

#header { 
height: 100px; 
margin: 0 auto; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
background-color: #FFF; 
background: linear-gradient(to bottom, #86b9e0 0%,#2989d8 50%,#0e75c9 100%);  
} 
body { 
padding: 0px; 
margin: 0px; 
background: linear-gradient(to bottom, #e5e5e5 0%,#afafaf 53%,#a0a0a0 100%); 
}

Я не уверен, если есть что-то на самом деле просто я пропускаю , или если я буду разрабатывать страницу совершенно по-другому. Будем очень благодарны любой помощи. Благодаря!

источник

2013-04-04 Lapys

Вы можете разместить ссылку на онлайн демо (с помощью jsfiddle.net, или что-то сопоставимое)? –

попробуйте добавить это к вашему CSS:

html, body { 
min-height: 100%; 
height: auto;  
}

это заставляет тело занимать по меньшей мере, высоту просмотра.

Проверить пример здесь: http://jsfiddle.net/ZzArv/

источник

2013-04-04 17:33:23 Pevara

Ничего себе, это сработало как шарм. Я не совсем уверен, почему контейнер переключается на этот нечетный градиент, но это, похоже, исправляет его. Спасибо, друг! – Lapys

CSS: Градиент применяется только к половине фона, но цвет фона фона применяется ко всей странице?

ответ

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