Помогите создать градиенты сверху-снизу (CSS)

Сообщений: 34 Регистрация: Сен 2011

1 Марта 2012 17:57

Есть страница, в которой надо сделать градиент заданный двумя картинками шириной 1 пикс, высотой 500 пикс - для шапки и подвала. Высота страницы изменяется, фон страницы #4c4c4c. В центре страницы в основном таблицы с другим фоном.

Все что не пробовал - не получается. =( Или фон только сверху или только снизу, или таблицы заливаются внутри. На CSS3 есть решение, но мне оно не подходит. =( Пример как это должно выглядеть в приложении.

Прикрепленные файлы

grad1.png (4.18 КБ) [ Скачать ]

Александр Данилюк

Сообщений: 195 Регистрация: Мар 2011

1 Марта 2012 18:59

Могу подсказать один из вариантов.
Пропишите два дива на страницу после <body> и перед </body>
Пример:

Код
<body> <div class="background-top"> <div class="background-bottom"> Тут таблицы, контент и прочее... </div> </div> </body>

А в css

Код

.background-top {
   background-image:url('/фон.png');
      background-position: top;
   background-repeat: repeat-x;
}


.background-bottom {
   background-image:url('/фон.png');
      background-position: bottom;
   background-repeat: repeat-x;
}

Соответственно фон будет ложится на свой класс diva, и принимать заданное положение.

Изменено: Александр Данилюк - 1 Марта 2012 19:02

Magere Сообщений: 34 Регистрация: Сен 2011	#3 5 Марта 2012 18:02 Спасибо, только получается что нижний градиент прижимается к верхнему и между ними не остается места для заливки. Я наверно немного неточно задал вопрос. Нижний градиет должен прижиматься к нижнему краю экрана, верхний - к верхнему. А между ними должна быть заливка определенного цвета. Как-то так. =(

Новые темы	Объявления	Свободное общение
20:01 Работаем в P2P платежах BYBIT \| USDT - RUB , RUB - USDT \| Ищем постоянных клиентов , выгодные условия. 19:04 Gambling Craft - гемблинг по белому 17:27 Нужна помощь советом! 10:44 AntiBot Cloud - бесплатный скрипт и сервис защиты сайтов 20:13 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 19:41 25$ (ежемесячно) AdSense 21:39 Подскажите где продвигать сайт.	23:28 Платежное решение! 20:55 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 20:19 SOCKS5 приватные прокси на 30 дней для PayPal 20:17 Google Voice аккаунты для бесплатных SMS и звонков 20:17 PayPal аккаунты для любых целей 19:58 Cryptonet.pro - быстрый и надежный обмен электронных валют! 13:50 AllCharge.online. Современный, быстрый и надёжный обменник	20:51 Точные прогнозы на футбол 23:47 Добро пожаловать в цифровой мир... 22:39 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор 11:58 Куплю проигрышные букмекерские аккаунты 00:12 Огородники 10:59 Новости искусственного интеллекта 04:26 Хром ругается на форум

Новые темы

Объявления

Свободное общение

20:01 Работаем в P2P платежах BYBIT | USDT - RUB , RUB - USDT | Ищем постоянных клиентов , выгодные условия.
19:04 Gambling Craft - гемблинг по белому
17:27 Нужна помощь советом!
10:44 AntiBot Cloud - бесплатный скрипт и сервис защиты сайтов
20:13 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика!
19:41 25$ (ежемесячно) AdSense
21:39 Подскажите где продвигать сайт.

23:28 Платежное решение!
20:55 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств
20:19 SOCKS5 приватные прокси на 30 дней для PayPal
20:17 Google Voice аккаунты для бесплатных SMS и звонков
20:17 PayPal аккаунты для любых целей
19:58 Cryptonet.pro - быстрый и надежный обмен электронных валют!
13:50 AllCharge.online. Современный, быстрый и надёжный обменник

20:51 Точные прогнозы на футбол
23:47 Добро пожаловать в цифровой мир...
22:39 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор
11:58 Куплю проигрышные букмекерские аккаунты
00:12 Огородники
10:59 Новости искусственного интеллекта
04:26 Хром ругается на форум

16.11.2021 18:02	где можно создать и разместить себе сайт просто и бесплатно?
22.05.2020 14:11	Помогите определиться с сайтом
25.09.2019 15:40	Помогите найти ошибку
05.05.2019 18:23	Помогите с сайтом
03.03.2019 08:56	Помогите найти шаблон