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

[Yellowcat]

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

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

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

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

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

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

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

[Storm]

чет вы тут намудрили смотрю

Не пойму в чем преимущество

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

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

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

перед моим подходом

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

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

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

[Fu-tai]

Дело то хозяйское. Но я бы сделал по своему ввиду того что: Красный виден будет. Посмотрите на ромбики внимательно и увидите что там существенные пробелы между ними. Залить фон красным также нужно потому что , не известна конечная высота страницы и уходя вниз она будет именно светло красной. Если все залить монохромными ромбиками то чистоты цвета неполучится! Да и просто на будущее, вдруг потом она захочет зеленый фон или оранжевый. Но повторюсь дело хозяйской. И принципиальной разницы нету!

[Yellowcat]

Пробовала по всякому и вот что выяснила:

Если в html прописать стиль и задать бекграунд цвет, тогда работает и бекграунд боди виден.

А вот когда задаю не цветом а картинкой то не хочет рисоваться.

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

html {
 background-color:#F9B99E;

 }
body {
 background:url(../resource/pics/fon_body1.gif) 0 0;
 background-repeat:repeat-x;
 padding:0;
 margin:0;
 line-height:14px; 
 text-align:center; 
 }

И вот когда не работает:

html { 
 background-image:url(../resource/pics/fon_body_smol.gif); 
 background-repeat:repeat;
 }
body {
 background:url(../resource/pics/fon_body1.gif) 0 0;
 background-repeat:repeat-x;
 padding:0;
 margin:0;
 line-height:14px; 
 text-align:center; 
 }

То что путь прописан верно это точно потому что если даже для html написать тот же адрес но размножить по всему экрану, все равно не хочет показываться. Вот так например:

html {

 background-image:url(../resource/pics/fon_body1.gif); 
 background-repeat:repeat;
 }
body {
 background:url(../resource/pics/fon_body1.gif) 0 0;
 background-repeat:repeat-x;
 padding:0;
 margin:0;
 line-height:14px; 
 text-align:center; 
 }

Мда...:/

[Storm]

В каком браузере тестируешь?

[Yellowcat]

В каком браузере тестируешь?

IE 6

Делала отдельную страничку все работает, переношу на сайт перестает.

[ZoNT]

а надо тестировать в ие, фф, опере и сафари

[Fu-tai]

Ох жуть. У вас почему то для одного элемента пользуется стиль background-image: а для другого вы пользуете просто background: разницу между ними можете прочитать перейдя по ссылкам. Пользуйте и для html и для body ? background-image: и будет вам Щастье!

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

[Fu-tai]

при переносе на сайт указывать нужно относительные пути относительно каталога в котором он лежит. Зачем впереди адреса две точки? У вас картинки лежат на две категории выше чем страница?

[Yellowcat]

Пользуйте и для html и для body ? background-image: и будет вам Щастье!

Сделала теперь все красиво.

при переносе на сайт указывать нужно относительные пути относительно каталога в котором он лежит. Зачем впереди адреса две точки? У вас картинки лежат на две категории выше чем страница?

да картинки выше.

Пути работают. Ведь для body видна картинка а для html тот же путь указываю но она не показывается

Я взяла и скопировала файл css в отдельную папку и там создала html страницу, рисунки в ту же папку закинула - тогда работает

Может как то связано что у меня php фаил а не html?

[Storm]

Я взяла и скопировала файл css в отдельную папку и там создала html страницу, рисунки в ту же папку закинула - тогда работает

Если так работает, "пляши" от этой структуры файлов и вс? получится.

[Yellowcat]

А вообще когда я использовала див у меня все работало, только фон начинался не с того места. Вернулась к этому и победила

Мне конечно еще подсказали, но главное заработало :)

Если вдруг кому понадобится вот решение:

В файле css прописываю стили:

* {
 margin: 0;
 padding: 0;
}

body {
 background: url('image_gradient.gif') top center repeat-x; рисунок с градиентом, полоска
 width: 100%;
 color: #fff;
 }
.gradient {
 background: url('image_fon.jpg') top center; маленький рисунок который размножаю 
 position: absolute;
 top: 768px;
 left: 0;
 width: 100%;
}

.gradient .content {
 position: relative;
 top: 0;
 left: 0;
 margin-top: -768px;
}

далее так:

<!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="ru" lang="ru">
<head>
<title>
 фон
</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

<div class="gradient">
<div class="content">

Очевидно, что гений начинает бессознательный холерик, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Художественная контаминация трансформирует бессознательный фарс, подобный исследовательский подход к проблемам художественной типологии можно обнаружить у К.Фосслера. Континуальность художественного процесса, следовательно, образует декаданс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Либидо образует героический миф, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. 
</div>
</div>

</body>
</html>

Огромное спасибо всем за поддержку :)