css градиент

@Samazar · Регистрация: 02.11.2011

Студворк — интернет-сервис помощи студентам

И снова доброго времени суток. Возникла следующая проблема:
Необходимо использовать на сайте градиент. Сверху должен идти до 15 процентов высоты с синего до белого, с белого до 85% высоты должен идти до белого, и с белого до 100% должен идти обратно в синий. Использовал генератор css градиентов. Но возникла проблема: фон, вместо нужного рисунка покрывается горизонтальными полосками (как будто указана жесткая высота для этих полосок).
Вот css код

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
*{
  padding: 0;
  margin: 0;
}
 
body{
  width: 100%;
  height: 100%;
background: #3987a8; /* Old browsers */
background: -moz-linear-gradient(top,  #3987a8 0%, #f5f5f5 15%, #f5f5f5 85%, #3987a8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3987a8), color-stop(15%,#f5f5f5), color-stop(85%,#f5f5f5), color-stop(100%,#3987a8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #3987a8 0%,#f5f5f5 15%,#f5f5f5 85%,#3987a8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #3987a8 0%,#f5f5f5 15%,#f5f5f5 85%,#3987a8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #3987a8 0%,#f5f5f5 15%,#f5f5f5 85%,#3987a8 100%); /* IE10+ */
background: linear-gradient(top,  #3987a8 0%,#f5f5f5 15%,#f5f5f5 85%,#3987a8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3987a8', endColorstr='#3987a8',GradientType=0 ); /* IE6-9 */
}

Никто не знает в какую сторону копать? на HTMLbook прочитал, что stop-color указывает не позицию, а цвет... но, возможно, я что-то не правильно понял? Ранее данный инструмент подобных проблем не выдавал...

PS Подобная тема на форуме поднималась, но автор написал, что проблемы не оказалось О_о

@Daredevi1 · 06.12.2011, 13:05

Да нету никаких полосок.

@Samazar · 06.12.2011, 13:11 **[ТС]**

Меня мои глаза раньше не подводили

@Daredevi1 · 06.12.2011, 13:16

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

@Samazar · 06.12.2011, 13:24 **[ТС]**

Приношу свои извинения за несколько неадекватную реакцию.
Проверить на пустом HTML файле не додумался

.
Шаблон разрабатывается для cms Joomla 1.7.3. Заметил что от количества содержимого меняется ширина полосок. Если тело пустое, то отображается белый фон.
Нет идей с чем это может быть связано?

@Daredevi1 · 06.12.2011, 13:48

Поставь в конце background-repeat: no-repeat; и все будет ок

Добавлено через 1 минуту
А если хочешь чтобы он растянулся на всю страницу тогда добавь html {height: 100%;}

@Samazar · 06.12.2011, 13:50 **[ТС]**

Спасибо, помогло! Методом волшебного комментария обнаружил в чем засада - она в doctype HTML5 О_о ...
Как раз писал, что буду думать как ее решить

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	06.12.2011, 13:05
	Да нету никаких полосок. 0

@Samazar 41 / 41 / 2 Регистрация: 02.11.2011 Сообщений: 193
	06.12.2011, 13:11 [ТС]
	Меня мои глаза раньше не подводили Миниатюры 0

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	06.12.2011, 13:16
	Код который вы привели рабочий. В другом месте у вас что-то не то... 0

@Samazar 41 / 41 / 2 Регистрация: 02.11.2011 Сообщений: 193
	06.12.2011, 13:24 [ТС]
	Приношу свои извинения за несколько неадекватную реакцию. Проверить на пустом HTML файле не додумался . Шаблон разрабатывается для cms Joomla 1.7.3. Заметил что от количества содержимого меняется ширина полосок. Если тело пустое, то отображается белый фон. Нет идей с чем это может быть связано? 0

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	06.12.2011, 13:48
	Поставь в конце background-repeat: no-repeat; и все будет ок Добавлено через 1 минуту А если хочешь чтобы он растянулся на всю страницу тогда добавь html {height: 100%;} 1

@Samazar 41 / 41 / 2 Регистрация: 02.11.2011 Сообщений: 193
	06.12.2011, 13:50 [ТС]
	Спасибо, помогло! Методом волшебного комментария обнаружил в чем засада - она в doctype HTML5 О_о ... Как раз писал, что буду думать как ее решить 0