Как сделать так чтобы картинка не повторялась в css

background-repeat

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round ) или равномерно растянуть от конца к концу (используя space ).

Как отключить дублирование фоновой картинки?

Каждый начинающий верстальщик встречался с проблемой, когда фоновое изображение зацикливалось и повторялось по всему периметру блока. Если вы наблюдаете эту картину – не стоит паниковать. Все, что надо сделать в свойство background добавить команду no-repeat, что запретит повторение.

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

Если все еще не понятно, предлагаю рассмотреть практический пример. Берем вот этот код

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

Как сделать, чтобы фон не повторялся?

По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой по всему элементу. Такое поведение не всегда требуется, часто картинка используется для стилизации и должна выводиться только один раз. Для этого к свойству background-repeat добавляется значение no-repeat , как показано в примере 1.

Пример 1. Фон веб-страницы

Здесь фоновая картинка выводится для всей веб-страницы, поэтому стилевые свойства добавляются к селектору body . Результат данного примера показан на рис. 1.

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

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