фиолетовый закат

Поделиться212012-08-11 18:01:09

Автор: Marcus
you can be yourself
Откуда: Питер
Зарегистрирован: 2012-08-04
Приглашений: 0
Сообщений: 92
Уважение: +2
Позитив: +1
Пол: Мужской
Провел на форуме:
16 часов 13 минут
Последний визит:
2012-12-14 00:43:42

Джонни Д. написал(а):

Не совсем, там есть фон-бесшовник, но узор не сильно контрастный, поэтому можно перепутать)

мм.. честно, даже глядя на исходник, увидел однотонную картинку..
ну, в любом случае найти фон-цвет - самое легкое..

Джонни Д. написал(а):

Что в этом дизайне ты видишь как фон-кусок? Какой именно элемент?

в правом верхнем углу фон можно отклеить, при этом данная деталь не закреплена, а двигается вместе с увеличением или уменьшением разрешения..

0

Поделиться222012-08-12 09:51:52

Автор: Джонни Д.
Во тьме ночной,при свете дня, сижу, лежу,верстаю я
Зарегистрирован: 2012-07-12
Приглашений: 0
Сообщений: 145
Уважение: +13
Позитив: +1
Провел на форуме:
1 день 19 часов
Последний визит:
2012-08-29 21:56:18

Теперь, когда ты имеешь представление о видах фонов, займемся именно кодовой частью.

Наш фон имеет селектор body.

body {

}

Задать фон-цвет мы можем всего лишь одной строчкой:

body {
background-color: #FF4531;
}

background-color обозначает такое свойство как цвет фона. Его можно использовать для раскрашивания абсолютно любого блока фоновым цветом. Также можно сделать фон прозрачным, но для нашего фона это не самый лучший вариант - будет просто белый фон, который далеко не всегда уместен.

Далее по сложности у нас идут бесшовники:

body {
background-color: #FF4531;
background-image: url(ссылка_на_картинку);
}

Мы просто добавляем наш бесшовный узор поверх прописанного цвета и все

Сейчас ты делаешь следующее:
Администрирование --- Свой стиль --- Включить свой стиль (галочка напротив Да),
В самое начало второго окна стиля (в цвета) после первой строки добавь селектор фона (его там вроде быть не должно). Сначала подбери не сильно дерущий глаза цвет, затем либо найди в сети бесшовник в той же гамме, либо попробуй сделать его сам по этому уроку - Делаем бесшовник своими руками

Если вдруг что-то не получается - сразу сюда

0

Поделиться232012-08-12 14:38:55

Автор: Marcus
you can be yourself
Откуда: Питер
Зарегистрирован: 2012-08-04
Приглашений: 0
Сообщений: 92
Уважение: +2
Позитив: +1
Пол: Мужской
Провел на форуме:
16 часов 13 минут
Последний визит:
2012-12-14 00:43:42

Джонни Д.
Вроде, готово..
http://testovik121.rusff.me/

исходник - http://s11.radikal.ru/i184/1109/cd/028782ecab15.jpg

Отредактировано Marcus (2012-08-12 14:40:33)

0

Поделиться242012-08-13 03:01:01

Автор: Marcus
you can be yourself
Откуда: Питер
Зарегистрирован: 2012-08-04
Приглашений: 0
Сообщений: 92
Уважение: +2
Позитив: +1
Пол: Мужской
Провел на форуме:
16 часов 13 минут
Последний визит:
2012-12-14 00:43:42

0

Поделиться252012-08-15 00:47:25

Автор: Marcus
you can be yourself
Откуда: Питер
Зарегистрирован: 2012-08-04
Приглашений: 0
Сообщений: 92
Уважение: +2
Позитив: +1
Пол: Мужской
Провел на форуме:
16 часов 13 минут
Последний визит:
2012-12-14 00:43:42

Возможно, пропаду на, ориентировочно, неделю. Причина - у меня на кухне будут делать ремонт и, если не согласятся на мою помощь, уеду на дачу, где нет инета. Предупреждаю, так как не знаю, возможно в последний момент - бах - и увезут на дачу, а я и не успею зайти.

0

Поделиться262012-08-16 21:11:49

Автор: Джонни Д.
Во тьме ночной,при свете дня, сижу, лежу,верстаю я
Зарегистрирован: 2012-07-12
Приглашений: 0
Сообщений: 145
Уважение: +13
Позитив: +1
Провел на форуме:
1 день 19 часов
Последний визит:
2012-08-29 21:56:18

Хорошо, отпишись, как вернешься

По возращении прочитай вот это

Далее мы перейдем в фону-обоине. Единственная проблема в этом случае - найти огроменную картинку, которая точно подойдет для самых больших существующих разрешений экрана. Думаю, Яндекс и Гугл тебе в этом помогут
Если ты используешь такой же код, который мы использовали для фон-бесшовника, то сразу вылезут две проблемы:
а) при масштабировании у тебя фон начнет скорее всего плыть вбок
б) если форум будет слишком длинным (много категорий и форумов), то окажется, что у тебя картинка где-то ближе к низу форума или оборвется, оставив только цвет, либо замоститься со стыками, что не комильфо.

Самый распространенный вариант в этом случае: фон зафиксирован по центру и никуда не прокручивается. Чтобы этого достичь, нужно добавить в наш код еще строки:
body {
background-color: #FF4531;
background-image: url(ссылка_на_картинку);
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
}

А теперь поподробнее рассмотрим те строки, которые я выделила жирным - они уже посложнее.
background-position отвечает за расположение фона на странице (горизонталь + вертикаль, прописывается через пробел). Всего у нас есть 3 возможных варианта на горизонталь и три возможных варианта на вертикаль. По горизонтали мы можем поставить наше изображение справа(right), слева(left) и по центру (center). По вертикали мы можем поставить наше изображение сверху(top), снизу(bottom) и опять-таки по центру(center).

background-attachment отвечает за статичность или динамичность фона, имеет два варианта - прокручивание (scroll) и фиксирование (fixed). По умолчанию фон у нас прокручивается, поэтому, чтобы он не оборвался, мы его фиксируем.

background-repeat отвечает за повторение фона. Здесь у нас всего четыре возможных варианта: фон повторяется по всем направлениям (repeat), повторяется по горизонтали (repeat-x), повторяется по вертикали (repeat-y), не повторяется вообще (no-repeat).
Все понятно, есть вопросы?