--- title: "Настройка фонового изображения плитки" description: "Как использовать картинку в качестве фона плитки в веб-части Vitextra Smart Tiles: пункт «Фоновое изображение», ввод URL-адреса или выбор изображения из библиотеки сайта, как изображение обрезается и масштабируется, как сохранить читаемость заголовка, запасной цвет, эскиз YouTube и удаление изображения." url: https://vitextra.com/ru/support/kb/10245 language: ru published: 2026-10-09 modified: 2026-10-10 products: - "Smart Tiles" author: "Vitālijs Kalniņš" tags: ["фоновое изображение плитки", "плитка SharePoint с фотографией", "фон Smart Tiles", "навигация плитками с изображениями", "плитки с картинками SharePoint Online", "фон плитки из библиотеки документов", "плитка с эскизом YouTube", "читаемый текст на изображении", "Vitextra Smart Tiles", "hero-плитки SharePoint"] --- # Настройка фонового изображения плитки Как использовать картинку в качестве фона плитки в веб-части Vitextra Smart Tiles: пункт «Фоновое изображение», ввод URL-адреса или выбор изображения из библиотеки сайта, как изображение обрезается и масштабируется, как сохранить читаемость заголовка, запасной цвет, эскиз YouTube и удаление изображения. ## Введение Цветная плитка со значком понятна и компактна; плитка с фотографией привлекает. [Smart Tiles](https://vitextra.com/ru/products/smart-tiles) позволяет любой плитке нести фоновое изображение вместо сплошного цвета — фотографию офиса для плитки *Как нас найти*, снимок продукта для страницы запуска, фотографию команды для сайта подразделения. В этой статье объясняется, как задать изображение, как оно отображается и как сохранить читаемость плитки. ## Установка изображения 1. Откройте страницу в режиме редактирования и нажмите кнопку **…** плитки. 2. Наведите указатель на **Цвет фона** и выберите **Фоновое изображение** — первый пункт подменю. 3. В диалоге **Изображение** введите или вставьте адрес изображения в поле **URL-адрес изображения** либо просмотрите библиотеки сайта и нажмите на изображение. 4. Нажмите **Применить**. ![Пункт «Фоновое изображение» в меню «Цвет фона»](https://static.vitextra.com/articles/10245/background-image-menu-ru.png) *Пункт «Фоновое изображение» в меню «Цвет фона»* Диалог **Изображение** — тот же, что используется для собственных изображений значков: поле **URL-адрес изображения** принимает адрес, начинающийся с `https://`, или путь, начинающийся с `/`, а список под ним позволяет просматривать ::библиотеки документов:: текущего сайта папка за папкой, показывая изображения в виде эскизов. Диалог подробно описан в статье [KB10244. Использование собственного изображения в качестве значка плитки](https://vitextra.com/ru/support/kb/10244). ## Как отображается изображение Изображение заполняет всю плитку: оно масштабируется так, чтобы полностью покрыть плитку, и центрируется, а то, что не помещается, обрезается по краям. Плитка сохраняет свои пропорции — её ширина задаётся настройкой **Размер** плитки, а высота — содержимым и настройкой **Внутренний Отступ**, — поэтому одно и то же изображение обрезается по-разному на плитке «Маленький» и на плитке «Во всю ширину». Значок, заголовок и описание рисуются поверх изображения в цвете, заданном настройкой **Цвет шрифта** плитки. ![Одно изображение на плитках разных размеров](https://static.vitextra.com/articles/10245/image-crop-ru.png) *Одно изображение на плитках разных размеров* ### Цвет под изображением Цвет фона плитки не исчезает, когда задано изображение: он закрашивается под изображением и просвечивает, пока изображение загружается, через прозрачные области PNG и в случае, если изображение вообще не удалось загрузить. Выберите цвет, близкий к общему тону картинки, чтобы ещё загружающаяся плитка не вспыхивала другим цветом. 📝 **Заметка** Выбор цвета в меню **Цвет фона** удаляет фоновое изображение: фоном плитки является либо изображение, либо цвет, но никогда оба сразу. Цвет, который был закрашен под изображением, снова становится видимым фоном. ## Сохранение читаемости текста Текст поверх фотографии читается ровно настолько, насколько они контрастируют друг с другом. Помогут несколько привычек: - выбирайте изображения со **спокойной областью** — небо, стена, вода, — где будет располагаться заголовок, или обрезайте изображение так, чтобы такая область оказалась в центре; - используйте **белый текст** на тёмных картинках и **чёрный текст** на светлых и задавайте **Цвет шрифта** соответственно; - включите **Тень** в настройках веб-части: тень под значком отделяет его от пёстрого фона; - подумайте о том, чтобы скрыть **заголовок** у плиток с изображениями, которые говорят сами за себя, и поместить название в **Описание**, чтобы оно по-прежнему показывалось во всплывающей подсказке. ![Читаемость определяют цвет шрифта и выбор изображения](https://static.vitextra.com/articles/10245/readability-ru.png) *Читаемость определяют цвет шрифта и выбор изображения* ## Эскиз YouTube Когда ссылка плитки указывает на видео YouTube, в меню **Цвет фона** над пунктом **Фоновое изображение** появляется ещё один пункт: **Эскиз**. Он использует изображение предпросмотра видео в качестве фона, не сохраняя адрес изображения в плитке. На опубликованной странице плитка с эскизом показывает только кнопку воспроизведения; её название и описание остаются во всплывающей подсказке. ## Требования к изображению - Адрес должен использовать `https://` или быть путём в текущем клиенте; у посетителей должен быть доступ на чтение к изображению. - Держите файл разумно небольшим — фотографии с 1200 пикселями по длинной стороне, сохранённой в формате JPEG или WebP, достаточно для плитки «Во всю ширину», и она быстро загружается на каждой странице, где используется панель. - Изображения с прозрачным фоном показывают цвет плитки через прозрачные области, что можно использовать для оформления в стиле водяного знака. ❗ **Важно** Изображения загружаются браузером посетителя с адреса, указанного в плитке. Храните изображения в библиотеке, которую может читать каждый посетитель страницы, — обычно это **Site Assets** того же сайта. Посетитель без доступа видит только цвет фона. ## Удаление изображения Либо выберите цвет в меню **Цвет фона**, либо снова откройте **Фоновое изображение** и нажмите **Убрать изображение** в диалоге. Плитка возвращается к своему цвету фона. 💡 **Совет** Цвета, доступные для плиток и их шрифта, описаны в статье [KB10043. Цвета плиток в Smart Tiles](https://vitextra.com/ru/support/kb/10043). Подробнее о продукте: