HTML Фоновое изображение
Фоновое изображение можно указать почти для любого элемента HTML.
В этой теме:
Фоновое изображение на элементе HTML
Чтобы добавить фоновое изображение к элементу HTML, используйте HTML атрибут style и CSS свойство background-image :
Пример
Добавьте фоновое изображение к элементу HTML:
Вы также можете указать фоновое изображение в элементе <style> в разделе <head> :
Пример
Укажите фоновое изображение в элементе <style> :
Фоновое изображение на странице
Если вы хотите, чтобы фоновое изображение было на всю страницу, вы должны указать фоновое изображение в элементе <body> :
Пример
Добавьте фоновое изображение для всей страницы:
Повторение фона
Если фоновое изображение меньше элемента, изображение будет повторяться по горизонтали и вертикали, пока не достигнет конца элемента:
Пример
Чтобы избежать повторения фонового изображения, установите для свойства background-repeat значение no-repeat (т.е. не повторяться).
Пример
Фон обложки
Если вы хотите, чтобы фоновое изображение охватывало весь элемент, вы можете установить для свойства background-size значение cover.
Также, чтобы весь элемент был всегда покрыт, установите свойства background-attachment значение fixed:
Таким образом, фоновое изображение покроет весь элемент, а не будет растягиваться (изображение сохранит исходные пропорции):
Пример
Растягивание фона
Если вы хотите, чтобы фоновое изображение растягивалось, чтобы вместиться во всём элементе, вы можете установить для свойства background-size значение 100% 100% :
Попробуйте изменить размер окна браузера, и вы увидите, что изображение растянеться, но всегда будет охватывать весь элемент.
Пример
Узнать больше о CSS
Из приведенных выше примеров вы узнали, что фоновые изображения можно стилизовать с помощью CSS свойств фона.
Чтобы узнать больше о CSS свойствах фона, прочитайте раздел CSS Фон на нашем сайте W3Schools на русском.
Вопросы для самоконтроля
- Как добавить фоновое изображение к HTML-элементам?
- Какой атрибут используется для добавления фонового изображения?
- Какое CSS-свойство используется для добавления фонового изображения?
- Где нужно указать путь к фоновому изображению, чтобы вся страница должна быть с фоновам изображением?
- Как будет отображаться на странице фоновое изображение, если оно меньше HTML-элемента?
- Какое значение нужно установить для свойства background-repeat , чтобы избежать повторения фонового изображения?
- Какое значение нужно установить для свойства background-size , чтобы фоновое изображение охватывало весь HTML-элемент?
- Какое значение нужно установить для свойства background-attachment , чтобы весь HTML-элемент был всегда покрыт?
- Какое значение нужно установить для свойства background-size , чтобы фоновое изображение растягивалось, чтобы вместить весь HTML-элемент?
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
background-repeat
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
| CSS2.1 |
| CSS3 |
<повторение> = repeat-x | repeat-y | [repeat | space | round | no-repeat]
Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.
Значения
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Повторение фона по горизонтали
Сама фоновая картинка приведена на рис. 2.
Рис. 2. Фон для блока
HTML5 CSS3 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(" elementID ").style.backgroundRepeat
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
background-repeat
Свойство background-repeat устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.
Интерактивный пример
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.
По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round ) или равномерно растянуть от конца к концу (используя space ).
Повтор фона
Утилиты для управления повторением фонового изображения элемента.
Справочник классов по умолчанию
Повторять
Используйте bg-repeat для повторения фонового изображения как по вертикали, так и по горизонтали.
Не повторять
Используйте bg-no-repeat , если вы не хотите повторять фоновое изображение.
Повторять по горизонтали
Используйте bg-repeat-x , чтобы повторять фоновое изображение только по горизонтали.
Повторять по вертикали
Используйте bg-repeat-y , чтобы повторять фоновое изображение только по вертикали.
Адаптивность
Чтобы контролировать повторение фонового изображения элемента в определенной контрольной точке, добавьте префикс
Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
Кастомизация
Варианты
По умолчанию, только responsive варианты создаются для утилит background repeat.
Вы можете контролировать, какие варианты создаются для утилит background repeat для изменения свойства backgroundRepeat в разделе variants Вашего файла конфигурации tailwind.config.js .
Например, эта конфигурация также будет генерировать варианты hover и focus :
Отключение
Если Вы не планируете использовать в своем проекте утилиты для изменения background repeat , Вы можете полностью отключить их, установив для backgroundRepeat свойство значение false в разделе corePlugins Вашего файла конфигурации: