Jump to content
  • 0

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


Yellowcat
 Share

Question

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

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

892a5fe9dc8ft.jpg

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

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

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

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

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

Link to comment
Share on other sites

Recommended Posts

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0
Как вариант.

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

<!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 (но на это есть готовые решения).

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

Я делаю так:

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

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

Link to comment
Share on other sites

  • 0
min-height:500px;

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

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

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

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

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

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

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

Вот так:

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

Link to comment
Share on other sites

  • 0

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

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; /*Полоска с градиентом, размножаю по оси х*/

}

Link to comment
Share on other sites

  • 0

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

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

делаю так

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

Link to comment
Share on other sites

  • 0

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

<!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 - синий фон.

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

Link to comment
Share on other sites

  • 0

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

Вот код

<!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, работает. Значит что-то ты не так делаешь.

Link to comment
Share on other sites

  • 0
Ничего в н?м не меняй. Переименуй свои картинки для 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;
}

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

Link to comment
Share on other sites

  • 0

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

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

Например твой код 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;}

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

Link to comment
Share on other sites

  • 0

чет вы тут намудрили смотрю. Ну вопервых стили для 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>
Усе

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

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy