Как сделать повторяющийся фон html

background-repeat

Краткая информация

Версии CSS

Описание

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

Синтаксис

= repeat-x | repeat-y | [repeat | space | round | no-repeat]

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

Значения

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Повторение фона по горизонтали

Сама фоновая картинка приведена на рис. 2.

Рис. 2. Фон для блока

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundRepeat

Браузеры

Значения round и space поддерживаются только в IE9 и Opera 11.0.

Источник

Background-repeat: повторение фоновой картинки

И установим его в качестве фона для блока div :

Изображение дублируется по вертикали и горизонтали

В результате фон продублировался по горизонтальной и вертикальной оси, на всю ширину и высоту нашего блока (отметим, что размеры блока div мы указали заранее).

Свойство background-repeat

Свойство background-repeat предназначено для управления повтором фона, заданного через background-image. Принимает оно следующие значения:

no-repeat — заполняет элемент фоновым рисунком один раз. Размер фона остается натуральным (не сужается и не растягивается). Свойство с данным значением очень часто применяется на практике (мы рассмотрим это далее в книге).

repeat-x — фон повторяется только по горизонтали (оси x), до полного заполнения элемента по ширине. Удобно использовать для оформления элементов интерфейса (графическая полоска вдоль шапки сайта и т. п.).

repeat-y — фон повторяется только по вертикали (оси y), до полного заполнения элемента по высоте. Удобно использовать для оформления элементов интерфейса (графическая полоска по высоте сайдбара и т. п.).

Эти значения поддерживаются всеми браузерами, включая IE6. Существует еще два значения, которые работают только в современных версиях браузеров (IE10+, Edge 12+, Firefox 49+, Chrome 32+, Safari 7+, Opera 19+):

round — фон повторяется так, чтобы в область элемента поместилось целое число изображений. Если это не удается сделать, фон автоматически подгоняется (масштабируется), чтобы соответствовать условию.

space — работает так же, как и предыдущее свойство, но с одним отличием: если целое число изображений не помещается в область, рисунки не масштабируются, а между ними добавляется пространство.

Итак, вы уже знаете, как добавлять фон к элементу, а также как управлять его повторением. В следующем уроке вы познакомитесь с еще одним полезным свойством — background-position.

Источник

Как сделать, чтобы фон повторялся только по вертикали?

Задача

Добавить фоновую картинку на веб-страницу, чтобы она повторялась только по вертикали.

Решение

Описание

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

Предварительно следует подготовить фоновый рисунок, который должен удовлетворять ряду условий:

Поясним про высоту фоновой картинки. Если сделать изображение слишком узким (2–3 пиксела), то при отображении фона эффект его появления будет заметен невооруженным глазом. Увеличение высоты позволяет замостить фон элемента быстро и неприметно.

В качестве образца фона возьмем узор, показанный на рис. 1.

Рис. 1. Фоновая картинка

Пример 1. Повторение фона

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Вид фона, повторяющегося по вертикали

Источник

Новые варианты повторения фоновой картинки в CSS3

Перевод: Влад Мержевич

background-repeat: space

Вариант space будет повторять картинки по горизонтали и вертикали без обрезания или изменения размера изображения:

background-repeat: round

Вариант round будет повторять картинки по горизонтали и вертикали без обрезания, но изображение может быть изменено:

Предположим, у нас есть фоновое изображение шириной 100px (фактический размер или изменённый с помощью свойства background-size ). Оно располагается в элементе шириной 520px по горизонтали, тогда:

round(520 / 100) = round(5.2) = 5

Браузер будет показывать пять изображений, но задаст ширину картинка как 104px (520px/5). Изображение сделано шире, чтобы вписываться в контейнер.

Различные повторения по ширине и высоте

background-repeat может содержать два значения для изменения горизонтального и вертикального повторения:

Изменение позиции фона

Повторения через space или round будут работать, как вы предполагаете, только когда background-position задано как 0 0. Вы можете свободно менять его, размеры изображений и расстояние между ними останутся теми же, но соответственно сместится левый верхний угол.

Работа в браузерах

Здорово. Спасибо, ребята.

Единственный способ добиться какого-то единства, это заставить Firefox отображать как Webkit.

Источник

Работа с фоном элемента в CSS

В этом учебнике мы уже рассмотрели с вами такие аспекты работы с изображениями как использование свойств границ (цвет, стиль и толщина), научились задавать тень для изображений (Статья «Тень элемента в CSS»), рассмотрели, как можно создать эффект рамки, добавив задний фон и пустой промежуток между границей и изображением (Статья «Блочная и строчная модель в CSS»). Научились делать изображения плавающими (Статья «Плавающие элементы в CSS») и позиционировать их относительно краев родительского элемента, научились управлять внешними отступами между элементами, но всего этого пока не достаточно.

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

Фон элемента это общий размер элемента, включая значения внутренних отступов (padding) и границ (border), но, не включая значение внешних отступов – свойство margin.

В настоящее время браузеры работают с тремя графическими форматами:

Чтобы задать изображение в качестве заднего фона необходимо использовать свойство background-image и указать путь к файлу изображения, который может быть как относительный, так и абсолютный:

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

Давайте рассмотрим пример, в котором установим задний фон, который представляет из себя три разноцветных квадрата размером 100 на 100 пикселей для элемента :

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

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

Результат нашего примера:

Рис. 115 Пример установки изображения в качестве фона.

Управление повтором фонового изображения

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

Это свойство имеет следующие доступные значения:

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

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

Результат нашего примера:

Рис. 116 Пример управления повтором фонового изображения.

Управление позицией фонового изображения

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

Рассмотрим пример использования этого свойства:

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

Результат нашего примера:

Рис. 117 Пример позиционирования фонового изображения.

Фиксированный задний фон

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

Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс» эффект.

В данном примере для всех элементов

Результат нашего примера:

Рис. 118 Пример фиксированного фонового изображения.

Свойства CSS 3 для работы с фоновыми изображениями

Настало время углубить свои знания в работе с задним фоном элементов и познакомиться с новыми свойствами CSS, которые были введены в стандарте CSS 3.

Возможные значения этого свойства:

Рассмотрим применение этого свойства:

В данном примере мы разместили три блока, задали для них задний фон в виде изображения и указали для них различные значения свойства background-origin:

Результат нашего примера:

Рис. 119 Пример использования свойства background-origin.

У Вас может возникнуть вопрос: — А в чем собственно заключается разница между свойством background-origin и background-clip?

Разница заключается в том, что свойство background-clip в отличие от background-origin обрезает ту часть фона, которая выходит из указанных рамок. Свойство background-origin лишь определяет, как позиционируется фоновое изображение.

В таблице представлены возможные значения этого свойства:

Давайте рассмотрим следующий пример:

В этом примере мы разместили три блока, установили для них задний фон в виде изображения и указали различные значения свойства background-clip:

Результат нашего примера:

Рис. 120 Пример использования свойства background-clip.

Как вы могли заметить свойства background-origin и background-clip, имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.

Установить размер заднего фона допускается с использованием единиц измерения CSS, процентов, либо ключевых слов:

Рассмотрим применение этого свойства:

В данном примере мы разместили пять блоков, задали для них задний фон в виде изображения и указали для них различные значения свойства background-size:

Результат нашего примера:

Рис. 121 Пример масштабирования фоновых изображений.

Универсальное свойство background

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

Где значения соответствуют вышерассмотренным нами свойствам:

Давайте рассмотрим пример использования универсального свойства background:

И так, что мы сделали в этом примере:

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Практическое задание № 28.

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

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

Источник