Как сделать, чтобы фон не повторялся?
Добавить фоновую картинку так, чтобы она не повторялась по горизонтали и вертикали.
Решение
Используйте свойство background со значением no-repeat для селектора body .
Описание
По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой на всём поле веб-страницы. Однако такое поведение фона не всегда требуется, поэтому на помощь придёт значение no-repeat , добавляемое к стилевому свойству background .
Общий синтаксис в этом случае будет следующий.
body В данном случае фон добавляется к веб-странице, исходно располагаясь в левом верхнем углу окна браузера и отображается единственный раз, т.е. без повторений. В примере 1 показано, как это сделать конкретно.
Пример 1. Фон веб-страницы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фон Содержимое веб-страницы
Результат данного примера показан на рис. 1.
Рис. 1. Фоновая картинка на веб-странице без повторения
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как сделать, чтобы фон не повторялся?
По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой по всему элементу. Такое поведение не всегда требуется, часто картинка используется для стилизации и должна выводиться только один раз. Для этого к свойству background-repeat добавляется значение no-repeat , как показано в примере 1.
Пример 1. Фон веб-страницы
Здесь фоновая картинка выводится для всей веб-страницы, поэтому стилевые свойства добавляются к селектору body . Результат данного примера показан на рис. 1.
Рис. 1. Фоновая картинка на веб-странице без повторения
См. также
- background-image
- background-repeat
- Атрибут background
- Градиенты в CSS
- Фон в CSS
- Фоновая картинка
background — repeat
При помощи этого свойства и небольшой картинки можно создавать красивые паттерны на фоне.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 17 мая 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство background — repeat управляет повтором фонового изображения. По умолчанию значение этого свойства — repeat , то есть фоновая картинка будет повторяться по вертикали и по горизонтали.
Пример
Скопировать ссылку «Пример» Скопировано
div class="element">div>
.element height: 100vh; background-image: url(images/pattern.png); background-size: 64px auto;>.element height: 100vh; background-image: url(images/pattern.png); background-size: 64px auto; >
Получился красивый паттерн. Изображение повторяется по горизонтали и по вертикали.
Изменим значение на repeat — x :
.element background-repeat: repeat-x;>.element background-repeat: repeat-x; >
Теперь картинка повторяется только по горизонтали. Аналогично можно повторить картинку по вертикали при помощи значения repeat — y .
Но чаще всего в работе встречается значение no — repeat . С таким значением фоновая картинка не будет повторяться ни по горизонтали, ни по вертикали.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
В качестве значения для свойства background — repeat используются следующие ключевые слова:
- no — repeat — фоновое изображение не повторяется, остаётся только одно внутри элемента.
- repeat — изображение повторяется и по горизонтали, и по вертикали до тех пор, пока не заполнит всю площадь элемента (значение по умолчанию).
- repeat — x — фон повторяется по горизонтали.
- repeat — y — фон повторяется по вертикали.
- space — изображение повторяется до тех пор, пока не заполнит весь элемент. При этом, если по размерам не удаётся повторить изображение без обрезки, то между картинками добавляется равное пространство. Крайне редко требуется в работе.
- round — изображение повторяется так, чтобы заполнить весь элемент. Но картинка не обрезается, повторяется целое количество раз. Если это не удаётся, то картинка масштабируется. Крайне редко требуется в работе.
Ключевые слова repeat и no — repeat можно комбинировать, чтобы управлять повторениями по горизонтали (первое значение) и по вертикали (второе значение). Но проще указывать специальные ключевые слова repeat — x и repeat — y .
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Свойство не наследуется.
�� Значение по умолчанию — repeat .
�� Чаще всего для полноэкранных фонов указывается значение no — repeat .
�� Свойство background — repeat нельзя анимировать ��
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
background — repeat — свойство простое. Написано повторять — повторяем фон. Написано не повторять — не повторяем.
�� С помощью повторения фона и линейного градиента ( linear — gradient ) можно создавать полосатые фоны.
div class="element">div>
.element height: 100vh; background-image: linear-gradient( #49a16c 50px, #064236 0 ); background-size: 100% 100px; background-repeat: repeat-y;>.element height: 100vh; background-image: linear-gradient( #49a16c 50px, #064236 0 ); background-size: 100% 100px; background-repeat: repeat-y; >
background-repeat
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inheritbackground-repeat: [ , ]* = repeat-x | repeat-y | [repeat | space | round | no-repeat]
Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.
Значения
no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat . repeat Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat . repeat-x Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat . repeat-y Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat . inherit Наследует значение родителя. space Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство. round Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
background-repeat Даже опытному верстальщику приходится иногда смотреть свой код на наличие опечаток и ошибок. Так что не брезгуй проверять код валидатором, это поможет избежать множества ляпов в будущем.
Результат данного примера показан на рис. 1.
Рис. 1. Повторение фона по горизонтали
Сама фоновая картинка приведена на рис. 2.
Рис. 2. Фон для блока
HTML5 CSS3 IE Cr Op Sa Fx
background-repeat Объектная модель
[window.]document.getElementById(» elementID «).style.backgroundRepeat
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Значения round и space поддерживаются только в IE9 и Opera 11.0.