>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Как растянуть фон по вертикали?

голоса: 0
Добрый день!
Прошу сообщить существуют ли способы растянуть фон сайта по вертикали на всю страницу, а не только на высоту открытого окна браузера. без его дублирования?
В качестве фона используется заданный градиент или изображение градиента.
Адрес сайта http://ate.ucoz.ru
| Автор: | Категория: Дизайн сайта
уточните ссылку на сайт
| Автор:

Ответов: 2

голоса: +3
 
Лучший ответ
Так попробуйте...
background: linear-gradient(to top, #FF0000, #0000FF) no-repeat fixed;
| Автор:
Выбор ответа лучшим | | Автор: Михаил Петров

Скорее данная манипуляция лишь закрепит градиент в статическом состоянии на высоту открытого окна, а необходимо, чтобы градиент заливал абсолютно весь фон сайта и плавно шел от начала (шапки) до конца (подвала)

 

| Автор:
Тогда так, добавляем min-height:100% для html и body

html {

min-height:100%
}

body {
background: linear-gradient(to top, #FF0000, #0000FF) no-repeat;
margin: 0px;
min-height: 100%;
padding: 0px;
}
| Автор:
Попробовал, но вместо повторения, градиент опять же принимает высоту "открытого окна" браузера, а при дальнейшей прокрутке фон вовсе пропадает.
Конечно, есть определенные сомнения на счет правильной вставки стиля html - вставил в CSS Ваш код, без каких-либо изменений.
| Автор:
К html  в ксс добавьте импортант

html {min-height:100% !important;}
| Автор:

Добавил, но результат остался темже!

| Автор:
Уберите айди #fon1 он мешает.
Вот тут живой пример http://jsfiddle.net/1vb5a9r5/
| Автор:

При вставках Вашего кода я их не использовал. Но даже удалив их, результата нет:

 

 

 

Конечно, логика понятна - надо задать длину блоку (например 100% по содержанию) и уже по ней заливать градиент, но проблема в том, что заливка ограничивается только размерами окна. Даже Вы скинув ссылку на пример задаете длину объекта, может поступить подобным образом с html или boby?

| Автор:

Что то вы делаете не так... какой браузер у вас? и небольшая фотосессия, что всё работает.

| Автор:
Воистину "Вау эффект". Использую Firefox последний. Немогли бы Вы опубликовать фрагменты html и css кода относящиеся к сути проблемы?
| Автор:
Ясно, ознакомтесь с вендорными свойствами http://htmlbook.ru/css/-moz-linear-gradient
| Автор:
голоса: 0
Либо применяйте параметр - http://htmlbook.ru/css/background-size задав значение 100%
| Автор:

Боюсь данный способ не помогает.

Вот код:

<body id="fon1">        

#fon1 {width:100%;height:100%; margin:0px; background: linear-gradient(to top, #B50101 , #323DA2);
background-size: 100%;}

На деле получается вот так:

Как видите, градиент лишь повторяется на размер открывшегося окна.

А необходимо, что бы он растянулся на всю длину страницы.

| Автор:
Михаил Петров,
без ссылки на сайт трудно вам помочь, ждем ссылку
| Автор:

вот ссылка ate.ucoz.ru

Как Вы поняли, сайт является клоном основного рабочего сайта.

| Автор:
...