Как сделать, чтобы фон не повторялся?
Добавить фоновую картинку так, чтобы она не повторялась по горизонтали и вертикали.
Решение
Используйте свойство 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
Свойство background-repeat задает каким образом повторять фоновую картинку элемента. По умолчанию картинка повторяется и по оси X, и по оси Y, таким образом покрывая собой всю доступную область.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| no-repeat | Картинка не будет повторяться вообще. |
| repeat-x | Картинка будет повторяться по оси X. |
| repeat-y | Картинка будет повторяться по оси Y. |
| repeat | Картинка будет повторяться по оси X и по оси Y. |
| space | Картинка повторится столько раз, чтобы полностью заполнить область, если это не удается, между картинками добавляется пустое пространство. |
| round | Картинка повторится так, чтобы в области поместилось целое число рисунков, если это не удается сделать, то фоновые рисунки масштабируются. |
Значение по умолчанию: repeat — покрывает узором весь экран.
Пример
По умолчанию фоновая картинка замостит собой весь элемент:
Пример
Давайте сделаем так, чтобы картинка не повторялась:
Пример
А теперь пусть картинка повторяется по оси X:
Background-repeat: повторение фоновой картинки
Если элементу задать свойство background-image , то фоновый рисунок будет по умолчанию повторяться в двух осях — по горизонтали (x) и по вертикали (y). Для примера возьмем небольшое изображение с бесшовным фоном:
И установим его в качестве фона для блока div :
В результате фон продублировался по горизонтальной и вертикальной оси, на всю ширину и высоту нашего блока (отметим, что размеры блока div мы указали заранее).
Свойство background-repeat
Свойство background-repeat предназначено для управления повтором фона, заданного через background-image. Принимает оно следующие значения:
- repeat — то же, что и значение по умолчанию — полностью заполняет элемент фоновым рисунком натурального размера, повторяя его сверху вниз и слева направо. Такой эффект хорошо смотрится только при правильном подборе фона, который в идеале должен быть бесшовным, не слишком ярким, малоконтрастным.
- no-repeat — заполняет элемент фоновым рисунком один раз. Размер фона остается натуральным (не сужается и не растягивается). Свойство с данным значением очень часто применяется на практике (мы рассмотрим это далее в книге).
- repeat-x — фон повторяется только по горизонтали (оси x), до полного заполнения элемента по ширине. Удобно использовать для оформления элементов интерфейса (графическая полоска вдоль шапки сайта и т. п.).
- repeat-y — фон повторяется только по вертикали (оси y), до полного заполнения элемента по высоте. Удобно использовать для оформления элементов интерфейса (графическая полоска по высоте сайдбара и т. п.).
Эти значения поддерживаются всеми браузерами, включая IE6. Существует еще два значения, которые работают только в современных версиях браузеров (IE10+, Edge 12+, Firefox 49+, Chrome 32+, Safari 7+, Opera 19+):
- round — фон повторяется так, чтобы в область элемента поместилось целое число изображений. Если это не удается сделать, фон автоматически подгоняется (масштабируется), чтобы соответствовать условию.
- space — работает так же, как и предыдущее свойство, но с одним отличием: если целое число изображений не помещается в область, рисунки не масштабируются, а между ними добавляется пространство.
Итак, вы уже знаете, как добавлять фон к элементу, а также как управлять его повторением. В следующем уроке вы познакомитесь с еще одним полезным свойством — background-position.
Как сделать, чтобы фон не повторялся?
По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой по всему элементу. Такое поведение не всегда требуется, часто картинка используется для стилизации и должна выводиться только один раз. Для этого к свойству background-repeat добавляется значение no-repeat , как показано в примере 1.
Пример 1. Фон веб-страницы
Здесь фоновая картинка выводится для всей веб-страницы, поэтому стилевые свойства добавляются к селектору body . Результат данного примера показан на рис. 1.
Рис. 1. Фоновая картинка на веб-странице без повторения
См. также
- background-image
- background-repeat
- Атрибут background
- Градиенты в CSS
- Фон в CSS
- Фоновая картинка