ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Background. Фоновые тайны

Сообщений 1 страница 9 из 9

1

Первоисточник: htmlbook.ru

Background. Фоновые тайны

Общие сведения

Описание
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.

Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

Синтаксис
background: [background-attachment || background-color || background-image || background-position || background-repeat]

Свойства

1. background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

background-attachment: fixed
Делает фоновое изображение элемента неподвижным.

background-attachment: scroll
Позволяет перемещаться фону вместе с содержимым.

2. background-color - определяет цвет фона элемента.

background-color: transparent
Устанавливает прозрачный фон.

background-color: #20bb20
Устанавливает фон определенного цвета (не забывайте про решетку перед самим кодом цвета)

background-color: rgba(red, green, blue, A)
rgba() - это цветовая модель RGB + альфа-канал, что позволяет нам задавать полупрозрачность там, где это требуется. значения red, green, blue для определенного цвета вы можете подсмотреть в фотошопе (link), альфа-канал задает нужную степень прозрачности цвета. В итоге свойство будет выглядеть примерно так: background-color: rgba(122, 173, 208, 0.7)

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

background-image: none
Отменяет фоновое изображение для элемента.

background-image: url(путь к файлу)
В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.

4. background-position - задает начальное положение фонового изображения, установленного с помощью свойства background-image.
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

• top left = left top = 0% 0% (в левом верхнем углу)
• top = top center = center top = 50% 0% (по центру вверху)
• right top = top right = 100% 0% (в правом верхнем углу)
• left = left center = center left = 0% 50% (по левому краю и по центру)
• center = center center = 50% 50% (по центру)
• right = right center = center right = 100% 50% (по правому краю и по центру)
• bottom left = left bottom = 0% 100% (в левом нижнем углу)
• bottom = bottom center = center bottom = 50% 100% (по центру внизу)
• bottom right = right bottom = 100% 100% (в правом нижнем углу)

В скобках указано, где располагается фоновый рисунок относительно контейнера.

background-position: top center

5. background-repeat - определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

background-repeat: repeat
Фоновое изображение повторяется по горизонтали и вертикали.

background-repeat: no-repeat
Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу).

background-repeat: repeat-x
Фоновый рисунок повторяется только по горизонтали.

background-repeat: repeat-y
Фоновый рисунок повторяется только по вертикали.

6. background-clip - определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
Warning! Свойство полностью поддерживается только браузерами Firefox и IE.

background-clip: padding-box
Фон отображается внутри границ.
http://htmlbook.ru/sites/default/files/images/css/css_background-clip_1.png

background-clip: border-box
Фон выводится под границами.
http://htmlbook.ru/sites/default/files/images/css/css_background-clip_2.png

background-clip: content-box
Фон отображается только внутри контента.
http://htmlbook.ru/sites/default/files/images/css/css_background-clip_3.png

7. background-origin - определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.

background-origin: padding-box
Фон позиционируется относительно края элемента с учетом толщины границы.
http://htmlbook.ru/sites/default/files/images/css/css_background-origin_1.png

background-origin: border-box
Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
http://htmlbook.ru/sites/default/files/images/css/css_background-origin_2.png

background-origin: content-box
Фон позиционируется относительно содержимого элемента.
http://htmlbook.ru/sites/default/files/images/css/css_background-origin_3.png

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

значение
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.

проценты
Задает размер фоновой картинки в процентах от ширины или высоты элемента.

auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

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

contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Пример (растягивается по ширине, при разрешенном дублировании фона - будет размножаться по вертикали):  background-size: 100% auto

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size

Safari и Chrome используют нестандартное свойство -webkit-background-size

Opera до версии 10.53 использует нестандартное свойство -o-background-size


Два фона и больше

Как можно поставить на форум два и более фоновых рисунка? Для форумов "mybb и партнеры"  можно использовать достаточно простой способ:

body {background: #цвет_фона url("фон-первый") top center;}
#pun_wrap {background: transparent url("фон-второй") top center no-repeat; }

В этом способе не стоит использовать дополнительных констукций вроде background-atachment: fixed, лучше вносить все поправки под обобщенное свойство background.
Второй фон "накладывается" на первый, подходит для размещения широких шапок [при условии,  что вы поставите верхний отступ для самой ленты-подложки форума (элемент #pun) ]

Второй способ - хитрее.
Сам фон выводится свойством background, оно же задает и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую, и в данном случае имеет значение их порядок. Требуется, например, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставим их первыми (наслоение идет "как есть" - первый фон всегда будет наверху, последний - в самом низу).

#pun {background:
     url(картинка-верх) top center no-repeat,
     url(картинка-низ) bottom center no-repeat,
     url(картинка-справа) right no-repeat,
     url(картинка-слева) left no-repeat;
     }

+1

2

Вы хотя бы сборщика указали -__-
Обидненько, между прочим-с.

0

3

Как и для уголков круглых...
Публиковалось же только на АА, зачем перетянули?

0

4

Wilhelm
Бралось с jugendstil, на форуме ничего не указано об авторстве и копирайте - ни в правилах (которых вообще нет), ни в статье, ни внизу форума - здесь я делаю вывод, что можно копипастить.
Добавлено:О сборщике тоже ни слова. Я же не экстрассенс, не могу знать, что это именно Вы составляли. Может, Вы взяли уже готовую статью.

0

5

Да уж, пре-лес-тно.  Брал бы - указывал конкретную ссылку на материал -__-

0

6

Wilhelm  Лан Врать - Все копируют в Итоге отсель => http://htmlbook.ru/css/background-clip

Это единственный стоящий учебник на руссишь - на остальное можно забить - этого хватает с лихвой!

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

7

Мне, новичку, статья нупрямочень помогла. Спасибо большое!

0

8

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

0

9

C3La-NS
это зависит от задуманного дизайна форума.
на словах не очень понятно.
например можно так: Стиль Король Лев оранжевый + PSD макет (Mybb) [10/10]

Код:
html {background: #f9a743 url(http://s1.uploads.ru/VMyEI.jpg) repeat-x top center;}
body {background: transparent url(http://s1.uploads.ru/IPtvf.jpg) no-repeat bottom center;}
Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0