Повторение фона по вертикали


Background-repeat и его значения round и space

March 27, 2014

Помимо хорошо известных четырех значений свойства — , , , , в спецификации CSS3 появились еще два, с которыми я познакомился совсем недавно.

Отлично, скажете вы! Ну и что, что же это за свойства? Мало прежних четырех? Давайте разберемся сначала, что это за свойства, а уже потом будем говорить, нужны они или не нужны.

Свойство background-repeat: repeat

Для начала посмотрим, как работает простое и привычное нам значение :

Видим, как браузер аккуратно сделал все, что мы от него требовали — размножил фоновое изображение по горизонтали и по вертикали. Что не вместилось в блок, то было обрезано. Получилось несколько некрасиво; но зато — что требовали.

Свойство background-repeat: round

В спецификации CSS3 появилось одно из двух значений свойства , которое делает попытку исправить ситуацию и выполнять “заливку” фона более красиво и “интеллектуально”. Это значение называется — от английского округлять.

Работает оно по следующему принципу — изображение размножается по вертикали и горизонтали фона блока, как и прежде. Но при этом браузер определяет, сколько раз удалось поместить изображение в блок без обрезки (по вертикали и по горизонтали). Сколько “целых” раз удалось поместить — столько раз он и помещает. А с оставшимся пустым пространством он поступает так — растягивает изображение по вертикали и горизонтали, чтобы равномерно заполнить это пустое пространство.

Пример показан ниже:

Результат получился не слишком красивый, конечно. Но зачет — попытка сделана. А если быть более точным и без всякого “юмора”, то такой способ хорошо подойдет для фоновых изображений небольшого размера.

Свойство background-repeat: space

Еще одно значение свойства из спецификации CSS3, призванное решить проблему красивого размещения фонового изображения в блоке элемента, это значение .

Принцип работы этого свойства аналогичен значению — браузер также считает количество целых “вхождений” изображения в фон элемента. Но вот с пустым пространством он поступает несколько иначе. Браузер равномерно распределяет его между изображениями (размер которых он оставляет неизменными).

Чтобы было понятно, о чем идет речь, посмотрите на пример ниже:

Мною намеренно были изменены размер блока, для которого “прописывалось” фоновое изображение; и размер самого изображения также. Все было сделано с целью более наглядного представления, как работает значение для свойства .

На рисунке выше хорошо видно, как браузер равномерно распределил пустое пространство по вертикали и горизонтали между изображениями.

Значения Round & Space — поддержка браузерами

В заключение осталось упомянуть последнее — какими браузерами поддерживаются оба значения свойства . Похвастаться особо нечем — только два браузера на момент написания этой статьи поддерживают и . Первый — это Google Chrome начиная с . А вот второй браузер, который может похвастаться (держитесь крепче за стул!) — это Internet Explorer v10.

Поддержка с помощью Modernizr

В библиотеку Modernizr включена (благодаря ходатайству Louis Lazaris) поддержка значений и CSS-свойства с помощью соответствующих классов и . Поэтому, теперь можно использовать эту библиотеку для определения возможности поддержки в браузерах.

Илон Маск рекомендует:  Маркированные списки

Например, таким кодом:

Заключение


Вот, в принципе, и все по значениям и свойства . В статье активно использовались мысли (и даже код, когда шла речь о Modernizr) из источника:

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

css повторять фон по вертикали

Я не могу понять, как вертикально повторять фоновое изображение на

то, что я пытаюсь сделать здесь, — это создать эффект тени на стороне страницы. аналогично сайту http://www.adobe.com/. вы увидите теневую границу с обеих сторон.

6 ответов

1 Решение Viktor S. [2012-10-04 13:51:00]

У вас просто нет высоты для ваших левых и правых div.

Смотрите этот обновленный JS скрипку.

Я добавил height:100px; просто чтобы показать, что он работает

и вот исправление для левого блока ( background-position:top right; и height):

1 Anu [2012-10-04 14:46:00]

В зависимости от этого тега изображение может повторяться в горизонтальном или вертикальном или в обоих направлениях.

Он принимает любое из следующих значений:

repeat : это значение говорит, что изображение повторяется в обоих направлениях

repeat-x : это значение указывает, что изображение повторяется только в вертикальном направлении

repeat-y : это значение указывает, что изображение повторяется в горизонтальных направлениях

no-repeat : это значение указывает, что фоновое изображение не должно повторяться

Например: repeat-x будет работать для повторения вертикального фона.

repeat: размноженное изображение

Повтор фонового изображения интересен тем, что можно в блок поместить очень маленькую картинку, и она размножившись займёт всё отведённое пространство.

Плюсом этого свойства является то, что такая картинка имеет очень маленький вес, и это благоприятно сказывается на скорости загрузки сайта, а также, при помощи его, легко сделать полосатый фон.

Достаточно сделать с края поля одну полоску, и она повторяясь займёт всё отведённое пространство.


Называется это свойство background-repeat, и имеет несколько значений

1. no-repeat — Запрещает повтор изображения, и оно по умолчанию размещается в левом верхнем углу.
2. repeat — изображение повторяется по горизонтали и вертикали.

3. repeat-x — изображение повторяется только по горизонтали.

4. repeat-y — изображение повторяется только по вертикали.

Давайте возьмём вот такую маленькую картинку, и сделаем из неё фон для тега body, то есть для поля экрана.

Вообще-то значение repeat выполняется по умолчанию, и применяется только в специальных случаях. В основном применяется запрет повтора — no-repeat.

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

Учитель физики будит заснувшего ученика:
— И кого ты видел во сне?
— Ломоносова. Он вам, Петр Иванович, привет передавал!

CSS Свойство background-repeat

Пример

Повторение изображения фона только по вертикали:

body
<
background-image:url(‘paper.gif’);
background-repeat:repeat-y;
>

Попробуйте сами »

Определение и Использование

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

По умолчанию изображение фона повторяется как по вертикали, так и по горизонтали.

Значение по умолчанию: repeat
Наследуется: нет
Версия: CSS1
JavaScript синтаксис: объект.style.backgroundRepeat=»repeat-y»

Поддержка Браузерами

Свойство background-repeat поддерживается всеми основными браузерами.

Замечание: Значение «inherit» не поддерживается в IE7 и более ранних версиях. IE8 требует объявление !DOCTYPE. IE9 поддерживает «inherit».

Советы и Замечания

Совет: Фоновое изображение располагается в соответствии со свойством background-position. Если свойство background-position не указано, изображение всегда располагается в левом верхнем углу элемента.

Илон Маск рекомендует:  Byte - Тип Delphi

Значения Свойства

Значение Описание
repeat Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Используется по умолчанию
repeat-x Фоновое изображение будет повторяться только по горизонтали
repeat-y Фоновое изображение будет повторяться только по вертикали
no-repeat Изображение фона не будет повторяться
inherit Указывает, что настройка свойства background-repeat должна наследоваться от родительского элемента

Попробуйте сами — Примеры


Повторение фонового изображения горизонтально и вертикально
Этот пример демонстрирует, как повторять фоновое изображение как вертикально, так и по горизонтали.

Повторение изображения фона только горизонально
Этот пример демонстрирует, как повторять фоновое изображение только по горизонтали.

Как отобразить фоновое изображение только один раз
Этот пример демонстрирует отображение фоновой картинки только один раз — без повторения

CSS свойство background-repeat

Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image.

По умолчанию, фоновое изображение повторяется по горизонтали и вертикали.

Фоновое изображение размещается в соответствии с установками свойства background-position. Если свойство background-position не установлено, то изображение располагается в верхнем левом углу элемента.

CSS синтаксис

Возможные значения

Значение Описание
repeat Значение по умолчанию. Фоновое изображение повторяется по горизонтали и вертикали.
repeat-x Фоновое изображение повторяется только по горизонтали.
repeat-y Фоновое изображение повторяется только по вертикали.
no-repeat Фоновое изображение показывается в одном экземпляре и не повторяется.
initial Устанавливает значение по умолчанию.
inherit Значение наследуется от родительского элемента.

Пример

Зададим, чтобы фоновое изображение повторялось только по вертикали

Свойство background-repeat

По умолчанию фоновое изображение повторяется. Это хорошо заметно, когда оно меньше блока. Управлять этим поведением можно с помощью CSS-свойства background-repeat . У свойства 4 значения:

  • repeat — повторять во всех направлениях. Это значение по умолчанию.
  • repeat-x — повторять только по горизонтали.
  • repeat-y — повторять только по вертикали.
  • no-repeat — не повторять.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 20 января по 22 марта 2020. До 26 ноября цена 13 900 14 900

background-repeat

На этой странице

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

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

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

Синтаксис


Значения

Следующие однозначные имеют двухзначные эквиваленты:

repeat-x тоже самое, что и repeat no-repeat
repeat-y тоже самое, что и no-repeat repeat
repeat тоже самое, что и repeat repeat
space тоже самое, что и space space
round тоже самое, что и round round
no-repeat тоже самое, что и no-repeat no-repeat

В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.

repeat Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
space Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства background-position игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фоновго изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space .
round Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
no-repeat Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством background-position .

Примеры

Результат

В этом примере каждому элементу списка соответствует другое значение background-repeat .

css повторять фон по вертикали

Я не могу понять, как вертикально повторять фоновое изображение на

то, что я пытаюсь сделать здесь, — это создать эффект тени на стороне страницы. аналогично сайту http://www.adobe.com/. вы увидите теневую границу с обеих сторон.

6 ответов

1 Решение Viktor S. [2012-10-04 13:51:00]

У вас просто нет высоты для ваших левых и правых div.

Смотрите этот обновленный JS скрипку.

Я добавил height:100px; просто чтобы показать, что он работает

и вот исправление для левого блока ( background-position:top right; и height):

1 Anu [2012-10-04 14:46:00]

В зависимости от этого тега изображение может повторяться в горизонтальном или вертикальном или в обоих направлениях.

Он принимает любое из следующих значений:

repeat : это значение говорит, что изображение повторяется в обоих направлениях

repeat-x : это значение указывает, что изображение повторяется только в вертикальном направлении

repeat-y : это значение указывает, что изображение повторяется в горизонтальных направлениях

no-repeat : это значение указывает, что фоновое изображение не должно повторяться

Например: repeat-x будет работать для повторения вертикального фона.

background-repeat

Поддержка браузерами


12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

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

Допускается указывать более одного значения, через запятую. Каждое новое значение применяется к соответствующему фоновому изображению в том порядке, который определён в свойстве background-image.

Примечание: если вы решили применить повторяющееся фоновое изображение, то начальную точку или координату первого отображаемого фонового изображения можно определить с помощью свойства background-position. Например, если вы примените значение repeat, то весь фон элемента будет заполнен фоновой картинкой. Но именно background-position укажет, с какой позиции нужно начать повторное отображение.

background-repeat

По умолчанию фоновые изображения повторяются (размножаются) пока не заполнят всю площадь элемента, используя свойство CSS background-repeat можно управлять этими повторениями по горизонтали и вертикали или совсем их запретить.

Вместо background-repeat можно использовать универсальное свойство background.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства background-repeat являются ключевые слова, которые определяют стиль повторения фонового изображения, начиная с места указанного в свойстве background-position (изначально это верхний левый угол элемента).

  • repeat — изображение повторяется по горизонтали и вертикали, пока не заполнит весь элемент.
  • repeat-x — размножение изображения идет только по горизонтали одной строкой.
  • repeat-y — размножение идет одной строкой по вертикали.
  • no-repeat — изображение вообще не повторяется, а показывается только одна копия рисунка.
  • inherit — наследует значение background-repeat от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: repeat.

Синтаксис

Пример CSS: использование background-repeat

Изображение, которое использовалось в примере можно увидеть здесь.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

Илон Маск рекомендует:  Что такое код pdf_close
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL