Фон

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

Параметры фона можно установить на вкладке Стилей правой панели в разделе Внешний вид — Фон и Цвет фона.

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

Чтобы установить цвет фона, нажмите "+" справа от него.

Далее выберите цвет или введите его значение (в формате Hex или RGB). Вы также можете выбрать цвет с помощью средства выбора цвета — пипетка (color picker). 

Вы можете сохранять цвета для последующего использования их в проекте. Для этого нажмите кнопку “+” в параметре Сохраненные цвета (Saved Colors). 

Нажав на выпадающий список в этом параметре, можно переключаться между Сохраненными цветами и Недавно использованными цветами (Last Used Colors). Это позволит выбрать цвета, которые недавно использовались.

Для цвета фона можно установить прозрачность — от 0 до 100%.

Добавленный фон можно удалить, нажав "-" справа от него.

Эта настройка позволяет установить стили фона для элемента. Вы можете добавить один или несколько слоев фона. Для каждого из них можно выбрать:

Настройка позволяет установить цвет фонового заполнения.

Градиент можно использовать как сами по себе, так и поверх существующего цвета фона или изображения. 

Линейный градиент создает градиент цвета в одном направлении.

Угол градиента

Установить угол наклона градиента можно двумя способами: 

Точки градиента 

С помощью градиентных точек (остановок) можно редактировать цвет и прозрачность градиента. 

Для изменения цвета выберите нужную точку на полосе градиентов и установите для нее желаемый цвет ниже (введя его значение или с помощью пипетки).

Чтобы добавить дополнительные цвета к градиенту, нужно добавить точку на полосу градиента. Для этого кликните на полосе градиента в нужном месте. Можно добавить несколько точек. 

Можно настроить положение точки градиента, перетащив ее вдоль полосы градиента. Чтобы удалить точку градиента, кликните по ней правой кнопкой мыши. 

Повторить (Repeat) градиент 

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

Обратный градиент 

Кнопка обратного градиента изменяет положение точек градиента на противоположное. 

Радиальный градиент создает градиент в форме круга. 

Цветовая точка слева будет цветом, который отображается в центре радиального градиента. 

Позиция центра радиального градиента 

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

Можно также включить или отключить Масштаб градиента (Scale) и Повторение (Repeat) и управлять видом градиента с помощью параметров Вид (Kind) и Размер (Size).

Чтобы добавить фоновое изображение, нажмите кнопку Выбрать изображение (Choose Image), а затем выберите одно из уже загруженных изображений или загрузите новое:

После выбора изображения его отображение появится в окне предварительного просмотра.

Параметры фонового изображения

Для фонового изображения можно указать параметры положения и размера. Также можно сделать изображение повторяющимся по горизонтали и/или по вертикали.

Размер фонового изображения

Оригинальный (Original)

По умолчанию добавленное изображение имеет размер 100%, т.е. соответствует размерам оригинала. Вы можете установить желаемый размер изображения в процентах в параметре Размер (Size) с помощью ползунка. Максимальный размер изображения - 200%.

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

Вмещать (Contain)

Пропорционально масштабирует фоновое изображение, чтобы оно полностью отображалось внутри элемента. 

Покрывать (Cover) 

Пропорционально масштабирует фоновое изображение, чтобы заполнить и покрыть весь элемент. Изображение может быть обрезано в зависимости от размеров элемента. 

Заполнить (Fill) 

Масштабирует изображение, подстраивая его размеры под размеры элемента, не обрезая. Изображение может искажаться. 

Вмещать по ширине (W) 

Масштабирует изображение, вмещая его по ширине. 

Вмещать по высоте (H) 

Масштабирует изображение, вмещая его по высоте. 



Положение фонового изображения 

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

Чтобы вручную настроить положение фонового изображения, можно ввести значение положения для горизонтального положения (X) и вертикального положения (Y) в пикселяx или перемещать изображение в окне предпросмотра, зажав его левой кнопкой мыши. 



Плитка (Tile) (повторение изображения)

По умолчанию фоновое изображение не повторяется. Вы можете выбрать повторение фона:



Фиксация или прокрутка 

Поведение фонового изображения при прокрутке можно выбрать в настройках фона: 

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

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

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

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

Вы можете переключить видимость слоя, кликнув на “глаз” справа, и удалить слой, нажав на кнопку "-".

Параметры Цвет фона и Фон - Заполнение цветом используются для установки цвета фона, однако между ними есть некоторые отличия.