Замостить фон что это
Перейти к содержимому

Замостить фон что это

  • автор:

Pattern в качестве фонового изображения

Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте htmlbook.ru.

Чтобы было яснее, рассмотрим пример psd-макета страницы:

Страница с фоновым изображением

Видим, что на странице имеются множественные фоновые изображения. И как вы думаете, каким образом нужно вырезать такое изображение? Чтоб потом замостить им фон страницы или фон блока-контейнера?

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

Если бы удалось обнаружить таковой фрагмент, то вырезал бы его с помощью инструмента “Crop”. Если бы фрагмент не обнаружил, то просто бы вырезал кусок фона размером побольше (что называется “на глазок”), опять-таки, с помощью инструмента “Crop”.

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

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

Описание выполняемых действий приведено в локализованной версии Photoshop.

Простое вырезание фона

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

В этом случае нужно поступить только одним способом.

Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E .

50x50px
100x100px

Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.

Вырезание фрагмента фона

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

Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.

Замостить фон или одна картинка? — Вопросы по CSS

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.

Фон — Основы верстки контента

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

Свойство background является обобщенным для 8 свойств:

  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size

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

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

Установка цвета или изображения

Базовой функцией свойства background является установка фонового цвета или фонового изображения. Для этого используются свойства:

  • background-color — установка фонового цвета
  • background-image — установка фонового изображения или градиента

Для установки цвета может использоваться различная запись: шестнадцатеричная; с помощью функций rgb() , hsl() и других. В конце урока будет оставлена ссылка на сайт, где можно выбрать любой цвет и получить его код для установки в качестве значения свойства background-color

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

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

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

Может показаться, что результат такой же, как и при использовании тега . Однако есть важное отличие: при использовании background-image изображение не находится в HTML и не участвует в формировании размеров блоков.

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

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

Особенность использования background-image заключается в возможности задать сразу несколько фоновых изображений. Для этого достаточно указать их через запятую:

background-image: url("path_to_image_1"), url("path_to_image_2"); 

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

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

CSS позволяет управлять тем, будет ли браузер клонировать изображение, и, если да, то по какому направлению. За это отвечает свойство background-repeat . Оно принимает одно из следующих значений:

  • repeat — Значение по умолчанию. Копировать изображение по всем направлениям, пока это позволяет пространство
  • repeat-x — Копировать только по горизонтали
  • repeat-y — Копировать только по вертикали
  • no-repeat — Не копировать
  • round — Копировать с возможностью сжатия, чтобы уместить максимальное количество копий. Это значение используется редко, так как приводит к деформации изображения
  • space — Копировать максимальное количество изображений без их обрезки. В начале копии располагаются в крайних точках, а потом равномерно располагаются в остальных частях блока. При этом возможны пробелы между копиями

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

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

Однако не всегда мы можем угадать, какого размера нужно изображение. Это зависит от множества факторов, например:

  • Разрешение экрана пользователя
  • Адаптивность проекта
  • Интерактивность, когда пользователь может взаимодействовать со страницей и от этого меняются некоторые ее части

При таких условиях может понадобиться одно изображение, которое, в то же время, будет подстраиваться по размеру под «реалии» страницы. Для этого существует свойство background-size , которое принимает два значения:

  • Ширина изображения
  • Высота изображения

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

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

Свойство background-size имеет два зарезервированных значения:

  • cover — Изображение масштабируется так, чтобы занять весь блок. В этом случае изображение может быть обрезано
  • contain — Изображение масштабируется так, чтобы максимально покрыть область блока, но не обрезать само изображение

Такие значения можно встретить при создании верхних секций на сайте, где есть фоновое изображение на всю ширину экрана

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

Еще одно свойство, которое влияет на размер изображения — background-origin . Его действие похоже на свойство box-sizing , которое отвечает за то, как браузер обрабатывает внутренние отступы и границы блока.

Свойство background-origin определяет, будет ли фоновое изображение располагаться на внутренних отступах или границах. Свойство принимает одно из значений:

  • border-box — фоновое изображение рисуется на всем блоке, включая внутренние отступы и границы
  • padding-box — значение по умолчанию. Фоновое изображение рисуется в области блока и его внутренних отступов, но не учитывается размер границ, заданных свойством border
  • content-box — фоновое изображение рисуется не по всему блоку, а по области контента внутри него

Взглянем на пример:

Видно, что изображения все равно накладываются на границы, например при значении padding-box , хотя ожидался другой эффект. Этот выход на границы связан с тем, что браузер не обрезает изображения, а граница не является сплошной.

Здесь поможет свойство background-clip , задача которого — точно определить, как обрезать изображение при его выходе за пределы блока. Как и background-origin , свойство принимает одно из трех значений:

  • border-box — обрезать по внешним границам элемента
  • padding-box — обрезать по границам внутренних отступов
  • content-box — обрезать по границам контента

Еще одно значение — text , которое до сих пор является экспериментальным, и предполагает обрезку изображения по границам текста. Со временем поддержка станет полной и значение можно будет использовать без опасения. Оно добавлено в пример, но может сработать некорректно в другом окружении.

Важно: свойство background-clip влияет не только на фоновое изображение, но и на фоновый цвет, установленный с помощью свойства background-color

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

Осталось два свойства из набора свойства background . Это:

  • background-position — позиционирование/расположение фона внутри блока
  • background-attachment — прокрутка фона вместе с контентом

По умолчанию все изображения появляются относительно левого верхнего угла блока, но зачастую изображение нужно расположить в другой точке. Для этого используется свойство background-position . Его синтаксис достаточно запутанный, поэтому начать стоит с предустановленных значений, которые покрывают существенную часть задач:

  • top — расположить фон в центре и прижать к верхнему краю
  • left — расположить фон в центре и прижать к левому краю
  • right — расположить фон в центре и прижать к правому краю
  • bottom — расположить фон в центре и прижать к нижнему краю
  • center — расположить фон в центре

Такое же поведение можно задать, используя значения для координат x и y. Например, чтобы воспроизвести поведение значения top , нужно по оси x указать значение в 50%, а для оси y значение 0 . В качестве единиц измерения можно использовать любые ранее изученные единицы: px , em , % и так далее.

.bg  /* Эквивалентно background-position: top */ background-position: 50% 0; > 

Также в качестве значений для осей x и y можно указывать уже изученные ключевые слова: top , right , bottom , left и center . Это помогает сделать CSS более выразительным и читаемым.

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

Свойство background-attachment позволяет контролировать такое поведение. Для этого устанавливается одно из значений:

  • scroll — значение по умолчанию. Фоновое изображение располагается в соответствии со свойством background-position . При этом оно фиксируется в области и не пропадает при скролле контента
  • fixed . У этого значения есть хитрость: позиционирование происходит не относительно блока, где было установлено свойство background , а относительно всей страницы целиком. Однако видимо оно будет только в рамках того блока, где был установлен фон. Такое поведение иногда неочевидно, поэтому значение используется редко
  • local — изображение фиксируется в определенной точке относительно контента. В примере ниже таким контентом является текст, поэтому фоновое изображение находится ровно по его центру, так как свойство background-position имеет значение center

Порядок записи свойств в background

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

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

Обязательное требование к записи — совместная запись свойств background-position и background-size . Для их записи используется символ / и позиционирование обязательно стоит до размеров. Вот как это выглядит в реальном CSS файле:

.element  background: url("../assets/images/hexlet.png") center / 0.5rem no-repeat #288cff; > 

В этой записи установлены следующие свойства:

  • background-image: url(«../assets/images/hexlet.png»)
  • background-position: center
  • background-size: 0.5rem
  • background-repeat: no-repeat
  • background-color: #288cff

Все свойства, которые не указаны, будут приведены в значение по умолчанию, что удобно при создании своих собственных компонентов.

В этом уроке мы познакомились со свойствами, составляющими обобщенное свойство background :

  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Сотбит: Оригами — Для пользователя — Настройка главной страницы — Настройки фона, фонового изображения

Раздел «Дизайн» в режиме конструктора сайта интернет-магазина «Оригами» предоставляет пользователю следующий функционал:

  1. настройка внутренних отступов блока;
  2. настройка цвета фона;
  3. настройка фонового изображения.

Далее будут показаны возможности визуальных настроек на примере блока комбинированный баннер.

Настройка внутренних отступов

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

Внутренний отступ сверху – меняет расстояние между областью контента и верхним краем блока.

Внутренний отступ снизу – меняет расстояние между областью контента и нижним краем блока.

Внутренний отступ слева – меняет расстояние между областью контента и левым краем блока.

Внутренний отступ справа – меняет расстояние между областью контента и правым краем блока.

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

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

Настройка фона блока

Для добавления однотонного фона блока существует настройка «Фон блока».

Она включает в себя кнопку «Цвет фона» с выпадающей стандартной палитрой цветов и строку, где выводится действующий цвет фона в кодировке HEX color.

Если из приведенных в стандартной палитре цветов ни один не подошёл, вы можете вставить в строку HEX-код нужного цвета и нажать клавишу «Enter». Данный цвет применится к блоку.

Для возврата к стандартному цвету блока, нажмите на кнопку «По умолчанию».

Фоновое изображение. Настройки фонового изображения

Фон любого из блоков можно оформить фоновым изображением. Также, фон блока можно комбинировать добавив и цветовую заливку, и изображение.

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

Важно учитывать условие написанное мелким шрифтом.

Нажмите на кнопку «Добавить изображение», в выпавшем меню найдите нужный файл и нажмите кнопку «Открыть». Выбранное изображение автоматически добавится в фон блока.

При автоматическом добавлении изображения, без дополнительных настроек, сайт может:

  • Растянуть изображение – если реальный размер изображения в пикселях близок к размеру фона блока.
  • Замостить фон – если реальный размер изображения в пикселях сильно меньше размера фона.

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

Далее будет рассмотрен каждый пункт отдельно:

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

Данный пункт настройки позволяет менять расположение изображения поля фона блока.

Переменная 1 – отвечает за перемещение по горизонтали.

Переменная 2 – отвечает за перемещение по вертикали.

Правила заполнения настройки: Переменная1%_пробел_Переменная2%

В значения переменных записываются только двузначные числа от 01 до 99. Данные значения показывают насколько далеко центр изображения подвинется от левого края (Переменная 1) и верхнего края (Переменная 2) блока.

Примеры использования:

Для примеров будет использоваться логотип Сотбит размером 500х500 пикселей.

Растягивание изображения

При добавлении логотипа Сотбит и установке значения масштабирования cover (растянуть), изображение приобретет вид показанный на скриншоте ниже. Почему так, описано в разделе Масштабирование фонового изображения.

Для выставления фонового изображения в центр нужно ввести в строке Положение фонового изображения значение 50% 50%.

Как видно, центр изображения совместился с центром фоновой области блока.

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

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

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

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

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

При изменении параметров размножения, стоит использовать такой же порядок действий для достижения желаемого положения «плиток» на фоне.

Стандартное расположение «плиток»:

Расположение после изменения параметров на 45% 65%:

Для ввода Переменной1 и Переменной2 допускаются также отрицательные значения.

Повторять фоновое изображение

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

Настройка работает только при выбранном параметре Масштабирование фонового изображения: contain (размножить).

В случаях, когда при Масштабирование фонового изображения: auto, происходит размножение, настройка также работает.

Параметры и их значения: no-repeat – не повторять изображение.

repeat – повторять изображение.

repeat-x – повторять только по горизонтали.

repeat-y – повторять только по вертикали.

пустая строка – автоматическая настройка повторения.

Масштабирование фонового изображения. Абсолютное значение масштабирования.

Масштабирование фонового изображения – данная настройка позволяет настроить заполнение фона изображением.

cover – растянуть.

contain – размножить.

auto – автоматическое заполнение.

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

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

При неравных сторонах изображения – изображение растягивается по меньшей стороне. Правила позиционирования остаются такими же.

В случае активной настройки contain, правило размножает изображение в соответствии с заданным масштабированием и условием повторения изображения. При отсутствии этих условий, правило выполняется как при настройке auto.

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

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

В фон данного блока добавлено изображение 500х500 пикселей. Правило сопоставило высоты фона блока и изображения, и размножило изображение только по горизонтали, применив настройку repeat-x.

Абсолютное значение масштабирования – в данной строке настраивается соотношение сторон фонового изображения вручную. Переменные вводятся в формате относительных единиц: ЕМ и %.

ЕМ – относительная единица изиерения, которая соотносится с размером шрифта родителя (в данном случае блока).

% – единица, которая соотносится с размером видимой области фона блока.

Правило заполнения: Значение1_пробел_Значение2.

Значение1 – отвечает за масштабирование по горизонтали.

Значение2 – отвечает за масштабирование по вертикали.

Если введено только одно значение, оно применится к обеим сторонам изображения.

Значения не обязательно должны указываться в одинаковых единицах измерения. Значение1 может быть в %, а Значение2 в ЕМ и наоборот.

После заполнения строки Абсолютное значение масштабирования как в примере ниже:

фоновое изображение стало выглядеть следующим образом:

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

Фиксировать фоновое изображение

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

fixed – Делает фоновое изображение элемента неподвижным относительно контента в блоке.

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

local – Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.

Пустая строка – стандартная настройка фиксации изображения.

Границы фона и фонового изображения. Область позиционирования фонового рисунка

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

Область позиционирования фонового рисунка – параметр указывает относительно какой области должен позиционироваться фоновый рисунок.

Оба параметра имеют схожие настройки:

Padding box — это область, включающая в себя внутреннюю область элемента и область, задаваемую свойством padding, но не включает границы.

Border box – включает в себя область внутри границы элемента и площадь под самой границей.

Content box — это внутренняя область элемента, в границах которой расположено контентное наполнение блока.

Нужна помощь в настройке решения

Оставьте заявку и мы свяжемся с вами!

Оставить заявку

О нас

  • Продукты
  • Кейсы
  • Услуги
  • Блог
  • Документация
  • Партнерская программа
  • Карта сайта
  • Сведения о направлениях ИТ-деятельности
  • Реквизиты

Контакты

  • +7 (495) 278-08-54 Москва
  • +7 (812) 670-07-40 Санкт-Петербург
  • Info@sotbit.ru E-mail

Подписаться

Являемся золотым сертифицированным партнером компании “1С-Битрикс”

bitrix-gold

Компания Сотбит. Разработка и внедрение eСommerce проектов

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *