Как фон сайта сделать градиентом?

Yellowcat · April 2, 2008

Хочу что бы фон у body был градиентом и при этом с рисунком

что то вроде этого:

Подскажите можно ли так сделать?

Проблема в том что если бы я знала длину страницы то вырезала бы полоску и размножила, но особенность бекграунда повторяться и если после светлой картинки опять начнется затемненная, то это будет не красиво

Думаю что можно было бы сделать маленькую картинку которую размножить на весь бекграунд а на нее наложить прозрачный фон с градиентом например до середины.

А вот как это сделать...

Можно ли с помощью css такое осуществить?

maddogrts · April 2, 2008

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

Предлагаю посмотреть на градиент внимательно, может если заставить повторятся среднюю часть это может подойти.

Т.е края сделать отдельно, а посередине повторяющийся фон (все с градиентом естесвенно), мн кажется что этот вариант вам подойдет. Сделать нужно следующее сделать 3 части страницы (т.е 3 блока наример body и 2 дива или 3 дива) в первую часть положить левую фиксированную часть, в 3 правую фиксированую часть , а по центру размножить.

Метод наколько я помню называется методом раздвижных дверей.

Storm · April 2, 2008

Как вариант.

Убрать градиент с узора, размножить на фоне узор.

Слоем выше положить png с прозрачностью, соответствующей градиенту.

Yellowcat · April 2, 2008

Как вариант.
Убрать градиент с узора, размножить на фоне узор.
Слоем выше положить png с прозрачностью, соответствующей градиенту.

А можно по подробней как это сделать?

у меня прописывается стиль для body:

body {
 background-image:url(..resourcepicsfon_body.jpg); /*Вставляю рисунок маленький квадрат*/
 background-repeat:repeat; /*Размножаю рисунок */
 }

Как сюда добавить png?

Storm · April 2, 2008

Можно и поподробнее

Скелет кода такой:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>TITLE</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {margin:0;padding:0;background:url(../fon_body.jpg) 0 0;}
#fon_png {background:url(../fon_png.png) no-repeat 0 0;min-height:500px;} /*min-height: - высота картинки .png*/
/*]]>*/
</style>
</head>

<body>
<div id="fon_png">
PAGE CONTENT
</div>
</body>
</html>

Конечно если просто скопировать этот код, то сразу вс? не заработает.

Нужно учесть, что IE6(и ниже) не понимает png и min-height (но на это есть готовые решения).

Fu-tai · April 2, 2008

Ну а зачем тело "body" засорять div-ом.

html тоже неплохо подойдет.

Разделяете градиент и узор. Узор у вас везде одинаковый значит можно определить один элемент с закономерностью и вырезать его. Градиент я так понимаю переткает из черного в светло красный?! Значит все что нужно это определить для html фоновый цвет конечным светлым цветом градиента, потом определить бэкграунд изображение в виде переката(градиента) от черного к светло красному. И уже поверх этого для body определить фоновым изображением узор который сохранен в png и имеет прозрачность.

Соответственно и боди не захломляем лишеими блоками и достигаем нужного результата. Помоему так будет оптимальнее.

Yellowcat · April 3, 2008

Слушайте а можно вместо png использовать gif?

может тогда и в IE заработает?

Хотелось бы что бы во всех браузерах был такой фон

Идеи отличные попробую обе посмотрю что получится

Dimitry Wolotko · April 3, 2008

IE несложно заставить понимать png

Storm · April 3, 2008

Не совсем понял задумку Fu-tai.

Определить для html фоновый цвет конечным светлым цветом градиента, потом определить бэкграунд изображение в виде переката(градиента) от черного к светло красному. И уже поверх этого для body определить фоновым изображением узор который сохранен в png и имеет прозрачность.

Возможно он имел в виду:

1. Для html фоном будет узор, вырезанный с закономерностью, без градиента.

2. Для body фоном накладываем градиентный png с прозрачностью.

Слушайте а можно вместо png использовать gif?

Объясню. Png поддерживает прозрачность, в отличие от gif. Т.е. если мы на узор наложим png картинку с прозрачностью, этот узор можно будет потом поменять на любой, но при этом градиент не будет менять своих свойств и будет смотреться также. Тем более мне кажется (могу и ошибаться), что в верхних углах страницы градиент темнее, чем сверху по центру, поэтому из gif составить узор с таким градиентом будет намного проблематичнее.

Советую почитать про png.

может тогда и в IE заработает?

Для того, чтобы IE корректно отобразил png нужно будет внести небольшие дополнения.

Yellowcat · April 3, 2008

Для того, чтобы IE корректно отобразил png нужно будет внести небольшие дополнения.

Подскажите пожалуйсто какие дополнения?

Storm · April 3, 2008

Было в этой теме

http://forum.htmlbook.ru/index.php?showtopic=8232

Yellowcat · April 3, 2008

1. Для html фоном будет узор, вырезанный с закономерностью, без градиента.

Я не совсем пойму как для html указать фон, ведь так будет не правильно:

<html background="..image.jpg">

Dimitry Wolotko · April 3, 2008

<style>
body {background:image.jpg;}
</style>

В этом ключе копайте.

Yellowcat · April 3, 2008

<style>
body {background:image.jpg;}
</style>
В этом ключе копайте.

Я делаю так:

body {
 background-image:url(..image.png);/*прозрачный фон с градиентом */
 background-repeat:repeat-x; /*Размножаю фон по оси х*/
 padding:0; 
 margin:0; 
 min-height:500px;
 }

А как для html задать фон не используя дивы

Dimitry Wolotko · April 3, 2008

min-height:500px;

зачем? И не кроссбраузерно, к тому же.

Storm · April 3, 2008

min-height:500px;
зачем? И не кроссбраузерно, к тому же.

Это я писал, не рассматривая вариант помещения фона в html. Советовал поместить градиент в фон div-а.

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

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

На всякий случай повторю его еще раз

.block {min-height:500px;height:auto !important;height:500px;}

А как для html задать фон не используя дивы

Вот так:

html {background:url(fon.gif);}

Yellowcat · April 3, 2008

Я сделала так:

body {
 background-image:url(..image.jpg);/*маленький фоновый рисунок*/
 background-repeat:repeat; /*Размножаю рисунок */
 padding:0; 
 margin:0; 
 }

html {
 background:url(..image2.gif) repeat-x; /*Полоска с градиентом, размножаю по оси х*/

 }

Но в этом случае у меня фон заполняется моим маленьким рисунком а вот рисунок с градиентом не накладывается

Если, например, у body убрать background

body {
 padding:0; 
 margin:0; 
 }

тогда это работает и градиент виден

html {
 background:url(..image2.gif) repeat-x; /*Полоска с градиентом, размножаю по оси х*/

 }

Storm · April 3, 2008

Конечно же не будет работать, ведь слой html находится под слоем body.

В html нужно фоном делать узор, а в body - градиент.

Yellowcat · April 3, 2008

html {
background-image:url(..image.jpg);/*маленький фоновый рисунок*/
background-repeat:repeat; /*Размножаю рисунок */
 }

body {
background:url(..image2.gif) repeat-x; /*Полоска с градиентом, размножаю по оси х*/
padding:0; 
margin:0; 
 }

делаю так

тогда рисунок градиент вижу а маленький фоновый не вижу

Yellowcat · April 3, 2008

Разве можно для html прописывать стили?

Мне зенд в качестве подсказки выдает только: dir, lang, version и все.

Storm · April 3, 2008

Самый простой пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
html {background:gray;}
body {background:blue;}
/*]]>*/
</style>
</head>
<body>
content
</body>
</html>

html - серый фон;

body - синий фон.

Может пути к картинкам неправильно прописала?

Yellowcat · April 3, 2008

если какой либо бекграунд убрать то второй будет работать а оба никак не хотят

Пути прописаны верно иначе бы по одиночке не работали

Storm · April 3, 2008

Хорошо, давай так.

Вот код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
html {background:url(images/html_fon.gif) 0 0;}
body {height:1000px;background:url(images/body_fon.gif) 0 0;}
/*]]>*/
</style>
</head>
<body>
content
</body>
</html>

Ничего в н?м не меняй. Переименуй свои картинки для html в html_fon.gif, для body - в body_fon.gif.

Уже было засомневался, но проверил в Мозилле и IE6, работает. Значит что-то ты не так делаешь.

Yellowcat · April 3, 2008

Ничего в н?м не меняй. Переименуй свои картинки для html в html_fon.gif, для body - в body_fon.gif.
Уже было засомневался, но проверил в Мозилле и IE6, работает. Значит что-то ты не так делаешь.

Сделала отдельную страничку по вашему коду - работает

а вот вставляю в код сайта не работает

Вот пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <HEAD>
 <TITLE> Главная </TITLE>
 <link href="../CSS/style.css" type="text/css" rel="stylesheet">
</HEAD>
<BODY>
...

и в css прописаны стили:

html {background:url(..resourcepicsfon_body_smol.gif) 0 0;}

body {height:1000px;background:url(..resourcepicsfon_body1.gif) 0 0;

 padding:0; 
 margin:0; 
 }

вот так не хочет работать

Storm · April 3, 2008

а файл стилей точно подключается? Может ссылка на него неправильно прописана.

Для начала проверь это. Если файл подключается, то копай в самих стилях.

Например твой код css я бы переделал следующим образом:

html {background:url(../resource/pics/fon_body_smol.gif) 0 0;}
body {height:1000px;background:url(../resource/pics/fon_body1.gif) 0 0;padding:0;margin:0;}

Обрати внимание на слеши, возможно именно в них была загвоздка.

Мне кажется что ошибка именно в путях.

Сделай наверное так.

index.html, style.css и папку pics (папка с картинками) положи в одну папку.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <HEAD>
 <TITLE> Главная </TITLE>
 <link href="style.css" type="text/css" rel="stylesheet">
</HEAD>
<BODY>
...

style.css

html {background:url(pics/fon_body_smol.gif) 0 0;}
body {height:1000px;background:url(pics/fon_body1.gif) 0 0;padding:0;margin:0;}

Вот так точно заработает

Fu-tai · April 3, 2008

чет вы тут намудрили смотрю. Ну вопервых стили для html задавать можно. Он такойже элемент документа как и все остальные. Во вторых body виден небудет пока в нем не появиться контента. Он же по сути блок с содержимым и при отсутствии контента в нем его высота равна 0 !

И по поводу расположения элементов вы меня переиначили. Давайте разберемся:

Мы имеем на картинке три составляющих:

1?фоновый цвет (красный), он лежит под всеми составляющими фона.

2?фоновый градиент (от черного до фонового красного), он лежит над фоновым цветом.

3?фоновый узор (ромбики. которые можно повторять из одного маленького ромбика), он лежит на самом верху этого "пирога". И является файлом png с прозрачным фоном.

Тоесть для того чтобы реализовать то что надо нам нужно сложить эти коржики попорядку возрастания и залить кремом.

Примерно по такому сценарию:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>:Желтой кошке</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

 тут думаю объяснять не надо, обнуляем усе и все тут 

* {
margin: 0;
padding: 0;
border: 0;
}

 а вот теперь немного поясню 

html {
background-color: цвет в который переходит градиент; Задаем элементу html фоновый цвет (красный кажись)
background-image:url(путь до градиента); Задаем фоновым изображением градиент, вернее его активную часть
background-repeat:no-repeat; Запрещаем его повтор
}
body {
background-image:url(путь до одного квадратика узора); задаем фоновым рисунком узор
background-repeat:repeat; Заставляем его повторяться
}
</style>
</head>

<body>
контент для того чтобы был виден body
<p>Сцепление, как следует из полевых и лабораторных наблюдений, эволюционирует в генетический гончарный дренаж, хотя этот факт нуждается в дальнейшей тщательной экспериментальной проверке. Псевдомицелий последовательно растягивает тяжелосуглинистый л?сс в полном соответствии с законом Дарси. Растрескивание вызывает неоднородный прибор Качинского, что дает возможность использования данной методики как универсальной. Расклинивание, как того требуют законы термодинамики, возникает прибор Качинского только в отсутствие тепло- и массообмена с окружающей средой. Прикатывание представляет собой ион-селективный гранулометрический анализ одинаково по всем направлениям. Электрод, как того требуют законы термодинамики, нейтрализует влагомер, вне зависимости от предсказаний теоретической модели явления.</p>
</body>
</html>
Усе

Думаю разберетесь!

Sign In

Как фон сайта сделать градиентом?

Question

Link to comment

Share on other sites

36 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information