Форум Сайтостроение Веб-строительство

CSS фон

12
Щ
На сайте с 04.07.2012
Offline
35
Щигящм
1208

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

Пробовал заключать в body{.....} - без остального кода - не работает.

6666
На сайте с 10.01.2005
Offline
505
6666
#1 

background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */

Я такое пользовал, градиентность без полосок получается

Каждое мое сообщение проверила и одобрила Елена Летучая. (c) Для меня очень важно все что Вы говорите! (http://surrealism.ru/123.mp3) .
vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#2

Какая ситуация? Можно и простым вырезанием полоски обойтись, обычно так и делаю, а дальше уже после окончания градиента цвет фона.

Вот так для вертикального градиента: background:url(полоска градиента) #цвет после градиента(внизу) repeat-x top left;

Не очень люблю такие штуки как указал - 6666 из-за проблем кроссбраузерности.

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
вопрос по html и Градиент в качестве фона Как сделать background для
6666
На сайте с 10.01.2005
Offline
505
6666
#3
vlad00777:
Не очень люблю такие штуки как указал - 6666 из-за проблем кроссбраузерности.

Не буду спорить. Есть еще другой вариант, вообще самый простой - растянуть на фон градиентную пнг"шку или джипег.

vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#4
6666:
Не буду спорить. Есть еще другой вариант, вообще самый простой - растянуть на фон градиентную пнг"шку или джипег.

Ну на самом деле выходов много. Все зависит от ситуации и сложности градиента.

Тс - нужно больше подробностей.

Щ
На сайте с 04.07.2012
Offline
35
Щигящм
#5

vlad00777

Сайт на html(самом чистом), остальное в коде css убрал, оставил только код фона, но он полосками - во всех браузерах.

vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#6
Щигящм:
vlad00777
Сайт на html(самом чистом), остальное в коде css убрал, оставил только код фона, но он полосками - во всех браузерах.

Экстрасенсы в отпуске - урл давайте.

6666
На сайте с 10.01.2005
Offline
505
6666
#7
vlad00777:
урл давайте.

.. и код градиента из CSS

vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#8
6666:
.. и код градиента из CSS

Не будем уж такими дерзкими. Я не гордый, сам посмотрю в цсс файле что будет прописано, был бы линк, а дальше дело уже за малым :)

Щ
На сайте с 04.07.2012
Offline
35
Щигящм
#9

HTML 

<html>

 <head>

<link rel="stylesheet" type="text/css" href="styles.css">

</html>

 </head>

CSS 

body{

background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);

}

Даже так полосками, код css подставлял разный.

vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#10

Тс сделайте не через цсс, зачем вам эти танцы с бубном? Сделайте картинкой как говорил я, ну или второй вариант 6666.

Вот второй вариант пример: http://www.gismeteo.ua/

body{background: url(body.png) repeat-x #FFF;}

Картинка: http://s2.gismeteo.ua/static/app/body.png

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий