Как вы уже поняли по названию раздела, здесь вы сможете познакомиться с тем, как вставлять фоновые изображения в свой собственный стиль. Фоновые изображения можно разделить на два вида: задний фон и основной фон.
Основной фон - это фон, который отображается на самом форуме.
Задний фон - это фон, который отображается за форумом.
Каждый может выбрать для себя лучший вариант. Я попробую описать все возможные варианты, которые знаю я. Что говорит о том, что я ими пользуюсь. От чего, если у вас будут вопросы, то я смогу вам сразу ответить. Если будет что-то, что я не знаю, то будем думать вместе.
Основные описания терминов взяты с HTMLBOOK.
Основные описания:
1. background-attachment
Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
Вackground-attachment может быть трех вариантов, которые смогут вам настроить фоновое изображение именно так, как вам хотелось бы. Это:
- fixed (Делает фоновое изображение элемента неподвижным.)
- scroll (Позволяет перемещаться фону вместе с содержимым.)
- inherit (Наследует значение родителя.)
2. background-position
Задает начальное положение фонового изображения, установленного с помощью свойства background-image.
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Порядок ключевых слов не имеет значения, то есть какое слово вы напишите первым не имеет никакой разницы. Эта функция относится к заднему фону, т.к. для основного фона прописывать данную функцию бессмысленно.
Варианты:
- top left = left top (в левом верхнем углу)
- top = top center = center top (по центру вверху)
- right top = top right (в правом верхнем углу)
- left = left center = center left (по левому краю и по центру)
- center = center center (по центру)
- right = right center = center right (по правому краю и по центру)
- bottom left = left bottom (в левом нижнем углу)
- bottom = bottom center = center bottom (по центру внизу)
- bottom right = right bottom (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно форума.
При inherit значение наследуется у родителя элемента.
3. background-repeat
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Данную функцию, как и предыдущую, можно использовать и к другим графическим изображениям, которые используются в дизайне.
Варианты:
- no-repeat (Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу).)
- repeat (Фоновое изображение повторяется по горизонтали и вертикали.)
- repeat-x (Фоновый рисунок повторяется только по горизонтали.)
- repeat-y (Фоновый рисунок повторяется только по вертикали.)
- inherit (Наследует значение родителя.)
Это основные функции, которые помогут разместить фоновое изображение именно так, как вам хочется. Я не стал прописывать background-image и background-color, т.к. буду их описывать, когда буду пояснять, как вставить фоновое изображение в дизайн форума. Но об этом в следующем сообщении.
by Suo
