Свойство background-repeat
Свойство background-repeat задает каким образом повторять фоновую картинку элемента. По умолчанию картинка повторяется и по оси X, и по оси Y, таким образом покрывая собой всю доступную область.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| no-repeat | Картинка не будет повторяться вообще. |
| repeat-x | Картинка будет повторяться по оси X. |
| repeat-y | Картинка будет повторяться по оси Y. |
| repeat | Картинка будет повторяться по оси X и по оси Y. |
| space | Картинка повторится столько раз, чтобы полностью заполнить область, если это не удается, между картинками добавляется пустое пространство. |
| round | Картинка повторится так, чтобы в области поместилось целое число рисунков, если это не удается сделать, то фоновые рисунки масштабируются. |
Значение по умолчанию: repeat — покрывает узором весь экран.
Пример
По умолчанию фоновая картинка замостит собой весь элемент:
Пример
Давайте сделаем так, чтобы картинка не повторялась:
Пример
А теперь пусть картинка повторяется по оси X:
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 со значением no-repeat для селектора body .
Описание
По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой на всём поле веб-страницы. Однако такое поведение фона не всегда требуется, поэтому на помощь придёт значение no-repeat , добавляемое к стилевому свойству background .
Общий синтаксис в этом случае будет следующий.
body
В данном случае фон добавляется к веб-странице, исходно располагаясь в левом верхнем углу окна браузера и отображается единственный раз, т.е. без повторений. В примере 1 показано, как это сделать конкретно.
Пример 1. Фон веб-страницы
Фон Содержимое веб-страницы
Результат данного примера показан на рис. 1.
Рис. 1. Фоновая картинка на веб-странице без повторения
Как сделать чтобы картинка не повторялась в CSS
Чтобы картинка не повторялась в CSS нужно использовать свойство background-repeat со значением no-repeat. Это в случае, если изображение у Вас задано через background или background-image. По умолчанию браузер повторяет картинку. Пример использования:
background-repeat: no-repeat;
Скопируйте: background-repeat: no-repeat;.
Не забудьте про точку с запятой на конце.
Добавить комментарий Отменить ответ
Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK
Manage consent
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
| Cookie | Duration | Description |
|---|---|---|
| cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics». |
| cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional». |
| cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary». |
| cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other. |
| cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance». |
| viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.