Как настроить фон форума?
Как вставить фон на форум/сайт?
Вставляем в свой стиль следующее:
body {
background-image: url(http://ссылка на фоновую картинку);
}
Как сделать фон форума фиксированным (без прокрутки)?
Добавляем к тому же коду "background-attachment: fixed;"
body {
background-image: url(http://ссылка на фоновую картинку); background-attachment: fixed;
}
Как сделать фон справа/слева? Как сделать его не повторяющимся?
Добавляем к тому же коду "no-repeat right/left;"
body {
background: url(http://ссылка на фоновую картинку) no-repeat right; background-attachment: fixed;
}
right - справа
left - слева
background: url(https://forumstatic.ru/files/001b/04/78/11169.jpg); - это наш фон, который нужно установить. По размерам он 1920 на 1080, то есть мы можем использовать её как общий фон. (Картинка не самая удачная, потому что тёмная и по ней плохо видно изменения, но я не смогла быстро найти другую).
Для его позиционирования используется свойство background-position, которому можно задавать разные параметры. Для параметра top картинка будет выравниваться по верхнему краю, с параметром center - устанавливается по центру. Ещё может использоваться left, которую я обычно использую, если мне надо размножить фон по вертикали и горизонтали.
Про background-repeat, наверно, говорить смысла нет, просто запоминаем, что если у нас большое изображение в котором мы уверены, то можно выставить no-repeat и не заморачиваться.
Ещё есть background-size. Параметр contain сохраняет пропорции изображения, но вписывает его в экран. То есть если картинка будет уже ширины монитора, то по бокам от неё останется пустое место. Параметр cover даёт изображению возможность полностью закрыть всё пространство монитора и не оставляет пустых мест, как contain.ну и вот как у меня прописан этот фон в коде у дизайна
Код:background: url(https://forumstatic.ru/files/001b/04/78/11169.jpg), #262626; background-size: cover; background-attachment: fixed; background-position: top center; background-repeat: no-repeat;если не разбивать эту запись отдельно по строкам-свойствам, а записать короче, то
Код:background: url(https://forumstatic.ru/files/001b/04/78/11169.jpg) fixed no-repeat top center, #262626; background-size: cover;
Какие еще настройки есть применимы к фону?
background-attachment: fixed - не прокручивающееся фоновое изображение
no-repeat - фоновое изображение прокручивается используя только один элемент (картинку) без повторов
repeat - фоновое изображение повторяется по горизонтали и вертикали.
repeat-x - фоновое изображение повторяется только по горизонтали
repeat-y - фоновое изображение повторяется только по вертикали
background-position: top center - фоновое изображение располагается по центру (вверху)
background-position: top left - верху слева
background-position: right top - верху справа
background-position: left слева по центр
background-position: right с права по центру
background-position: bottom left - внизу слева
background-position: bottom - внизу
background-position: bottom right - внизу справа
Итак, воспользуемся свойством background
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.
background: [background-attachment || background-color || background-image || background-position || background-repeat]
Теперь расшифровываем:
background-attachment - определяет будет фоновое изображение прокручиваться или фиксировано. Значение:
fixed - фиксированное фоновое изображение;
scroll - прокручивающее фоновое изображение;
background-color - цвет фона. Значения:
цвет*
transparent
background-image - фоновое изображение. Значения:
url(путь к файлу)
none
background-position - позиция фонового изображения. Значения: выставляется 2 значения - сначала по горизонтали, потом по вертикали. Если выставлено одно значение, значит второе принимается по умолчанию (для вертикального выравнивания это top, для горизонтального - left)
Значения для выравнивания по горизонтали:
left
center
right
Значения для выравнивания по вертикали:
top
center
bottom
background-repeat - определяет будет ли фоновое изображение повторяться. Значения:
no-repeat - не повторяется;
repeat - повторяется всегда;
repeat-x - повторяется по горизонтали;
repeat-y - повторяется по вертикали;
Теперь собираем из этого конструктора нужное нам правило. Например:
background: fixed #BAF479 url(путь к картинке) right bottom no-repeat;
* Шестнадцатеричный код цвет, например #ffffff - белый, #000000 - черный и т.п.
Еще надо бы поставить значения, чтоб все было нормально:
