Фоновое изображение может придать уникальность вашему проекту. В этой статье вы можете прочитать рекомендации по установке фона на вашей вики.

Общая информация

Фон загружается через Конструктор тем во вкладке «Настройка». Фон может быть в формате .png, .jpg или .gif, но размер файла не должен превышать 300 килобайт. Если изображение весит больше, вы можете уменьшить его в графическом редакторе, уменьшив качество изображения, его размер в пикселях или формат (.jpg обычно весит меньше, чем .png).

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

  • На небольших экранах с разрешением менее 1065рх, фоновая картинка не будет отображаться, за исключением узкой полоски вверху страницы, и всё пространство экрана займёт область с содержимым страницы. Фоновое изображение не будет загружаться, вместо него будет использоваться фоновый цвет, заданный в конструкторе тем.
  • При дальнейшем увеличении разрешения экрана область с содержимым будет расти до своего максимума в 1240рх. При этом с каждой стороны экрана будет видно фоновое изображение.

Заполнение фона

Фоновое изображение имеет несколько режимов отображения: плитка и однократное использование (с разделением и без разделения).

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

Если вы не используете заполнение плиткой, то фоновое изображение будет располагаться в центре страницы по верхнему краю. Незафиксированное изображение будет проматываться вверх вместе с содержимым страницы. Если поставить галочку «Фикс.», то изображение будет оставаться на месте, в то время, как содержимое страницы будет прокручиваться. Для того, чтобы фоновое изображение адекватно реагировало на все изменения разрешения экрана и ширины области с содержимым страницы, оно делится пополам при увеличении разрешения экрана и пустая центральная часть заливается специально выбранным в Конструкторе тем цветом, который может отличаться от цвета фона страницы. Это сделано для того, чтобы справа и слева от области с содержимым страницы всегда находились одни и те же части фонового изображения.

Если вы не хотите, чтобы ваше фоновое изображение делилось пополам при увеличении разрешения экрана, вам нужно выбрать изображение размером более 2000рх в ширину. При этом в Конструкторе тем появится опция не разделять.

Создание фонового изображения

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

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

BackgroundDiagram-ru.png

Несколько пояснений к схеме:

  1. Сам фон (тёмно-синий) — является основой, придающей уникальность вашей вики.
  2. Градиент — плавный переход внизу и/или по бокам фонового изображения в прозрачность или в цвет, заданный основным в конструкторе тем, позволит достичь плавного сочетания фонового изображения и фонового цвета.
  3. Поля — области красного цвета по краям от основного пространства — это та часть фонового изображения, которая будет видна бóльшую часть времени большинству участников.
  4. Основное пространство — полупрозрачный прямоугольник в середине шаблона отмечает место, которое будет занимать тело страницы вики. Значительная часть изображения фона может быть скрыта им, если в Конструкторе тем не установлен уровень прозрачности тела страницы.
  5. Жёлтая светящаяся полоса в центре примера — середина изображения, линия, по которой будет происходит разделение фоновой картинки на больших экранах. Цвет этой линии можно задать в Конструкторе тем.

Советы по созданию фона

  • В зависимости от размера вашего исходного изображения, фон может оказаться слишком маленьким или слишком большим для вашей вики. Лучше всего выбрать одно изображение с высоким разрешением. Начинайте с изображений в 1900 на 1000 пикселей и уменьшайте их по мере необходимости. Из-за динамического макета страниц на мониторах с разрешением от 1030 до 2000 пикселей в ширину с каждой стороны центральной части страницы будут присутствовать поля в 170 пикселей. Фон для вашей вики лучше всего будет виден в этих полях, и поэтому важно сделать так, чтобы самые интересные детали вашего изображения попали именно туда. Для плавного перехода фонового изображения в фоновый цвет, если выбранное изображение небольшое, можно использовать градиент.
  • Выбирая или создавая фон, учитывайте максимальный диапазон разрешений — от самых маленьких, когда видны лишь узкие полоски в несколько десятков пикселей, до самых больших разрешений, когда будут видны края даже самых больших изображений.
  • Чтобы сделать вашу жизнь проще, мы создали шаблон для графических редакторов Photoshop и GIMP. На этом шаблоне чётко обозначены границы видимых полей. Просто наложите ваше изображение на шаблон, и вы увидите, как эффектнее подогнать вашу картинку под параметры фона. Скачать этот шаблон можно здесь.
  • Можно заставить фоновое изображение покрывать всю видимую область фона. Для этого отредактируйте Mediawiki:Wikia.css на своей вики добавив следующий код:
body.skin-oasis,
body.background-dynamic.skin-oasis::after,
body.background-dynamic.skin-oasis::before {
    background-size: cover;
}
  • В целом рекомендуется ограничиваться средствами Конструктора тем при настройке фона вики. Фоны, добавляемые и настраиваемые с помощью CSS могут в любой момент перестать работать корректно из-за изменения классов CSS сайта, а также могут отрицательно сказаться на скорости загрузки страниц.
  • Устанавливая прозрачность тела страницы в Конструкторе тем, учитывайте фон, который будет использоваться на вики. Если он контрастный или пёстрый, то высокая прозрачность будет мешать чтению текста на пёстром фоне.

См. также

Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA, если не указано иное.