Как отключить дублирование фоновой картинки?
Каждый начинающий верстальщик встречался с проблемой, когда фоновое изображение зацикливалось и повторялось по всему периметру блока. Если вы наблюдаете эту картину — не стоит паниковать. Все, что надо сделать в свойство background добавить команду no-repeat, что запретит повторение.
Такая ситуация может возникнуть, если не указана вышеупомянутая команда, так как браузер по умолчанию определяет повторение для картинки.
Если все еще не понятно, предлагаю рассмотреть практический пример. Берем вот этот код
Вставляем к себе и смотрим, что получилось (учти, адрес изображения ты должен вставить свой)
Как убрать повторение картинки в css
Чтоб он не повторялся, то к свойству свойство background добавить команду no-repeat , которая автоматически запретит создавать новые повторы.
Как пример:
После установки мы видим, что у нам появился один фон, и все смотрится корректно, как на большом мониторе, так и на мобильных аппаратах.
Для того, чтоб выключить дублирование картинки, то здесь задействуем свойство background-repeat со значением no-repeat. Если вы хотите оставить повторение только по горизонтали или вертикали, тогда используйте свойство repeat-x или repeat-y соответственно.
background-repeat¶
Свойство background-repeat определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image .
Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис¶
Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.
background-repeat
Свойство background-repeat устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.
Интерактивный пример
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.
По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round ) или равномерно растянуть от конца к концу (используя space ).