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


Содержание

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 Свойство 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 не указано, изображение всегда располагается в левом верхнем углу элемента.

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

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

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

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

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

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

background-repeat

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

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

Описание

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

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


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

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

Пример

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

Подробнее примеры ниже.

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

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

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

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

Значение по умолчанию: repeat
Inherited: no
Animatable: no. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.backgroundRepeat=»repeat-x»

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

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

Свойство
background-repeat 1.0 4.0 1.0 1.0 3.5

Примечание: IE8 и более ранние версии не поддерживают несколько фоновых изображений на одном элементе.

Синтаксис CSS

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

Значение Описание
repeat Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не умещается. Это значение по умолчанию
repeat-x Фоновое изображение повторяется только по горизонтали
repeat-y Фоновое изображение повторяется только вертикально
no-repeat Фоновое изображение не повторяется. Изображение будет показано только один раз
space Фоновое изображение повторяется как можно больше без обрезки. Первое и Последнее изображения закреплены на обеих сторонах элемента, и пробел распределяется равномерно между изображениями
round Фон-изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без зазоров)
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Повторите фоновое изображение как по вертикали, так и по горизонтали (по умолчанию):

Пример

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

Пример

Не повторяйте фоновое изображение. Изображение будет показано только один раз:

Пример

Использование фона-повторить: пространство и фон-повторить: круглые:

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

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

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

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

CSS синтаксис

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

Фон в CSS – памятка для начинающих

При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

Работа с фоном в CSS

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


background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам

, так и ко всему веб-сайту с помощью тега .

background-image

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

Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

background-repeat

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

Оно может иметь несколько значений:

  • background-repeat: repeat-x — повторение по горизонтали;
  • background-repeat: repeat-y — повторение по вертикали;
  • background-repeat: repeat — повторение и по горизонтали и по вертикали;
  • background-repeat: no-repeat — изображение не повторяется.

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

  • background-attachment: scroll — фон прокручивается вместе со страницей;
  • background-attachment: fixed — фон остаётся неподвижным.

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .

  • background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
  • background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

gradient

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

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

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

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

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

Относительное изменение размера

Если применять проценты, размер будет основываться не на изображении, а на элементе.

То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

Масштабирование до максимального размера

В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

Такой фон страницы будет автоматически подгоняться под любое разрешение:

Заполнение фоном

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

Масштабирование сразу нескольких фонов

Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:

Создание полупрозрачного фона в CSS

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

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

Пример создания полупрозрачного блока:


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

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

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 .

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

Пример

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

Подробнее примеры ниже.

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

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

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

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

Значение по умолчанию: repeat
Inherited: no
Animatable: no. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.backgroundRepeat=»repeat-x»

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

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

Свойство
background-repeat 1.0 4.0 1.0 1.0 3.5

Примечание: IE8 и более ранние версии не поддерживают несколько фоновых изображений на одном элементе.

Синтаксис CSS

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

Значение Описание
repeat Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не умещается. Это значение по умолчанию
repeat-x Фоновое изображение повторяется только по горизонтали
repeat-y Фоновое изображение повторяется только вертикально
no-repeat Фоновое изображение не повторяется. Изображение будет показано только один раз
space Фоновое изображение повторяется как можно больше без обрезки. Первое и Последнее изображения закреплены на обеих сторонах элемента, и пробел распределяется равномерно между изображениями
round Фон-изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без зазоров)
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Повторите фоновое изображение как по вертикали, так и по горизонтали (по умолчанию):

Пример

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

Пример

Не повторяйте фоновое изображение. Изображение будет показано только один раз:

Пример

Использование фона-повторить: пространство и фон-повторить: круглые:

Использование фонов при оформлении сайта. Часть 1

Совсем недавно мы с Вами познакомились со свойствами границ (border) при использовании CSS. Сегодня мы займемся рассмотрением свойств фонов.

Эта тема также очень важна, так как ни один современный сайт не обходится без применения фоновых изображений.


Свойство background

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

Это свойство background определяет фон для всех элементов с идентификатором класса .box (подробнее об идентификаторах читаем здесь) и придает ему следующие свойства: белый цвет подложки (#ffffff), фоновое изображение, которое находится по адресу url (images/bg.png) и задает для этого фона повторение по оси х. Если писать каждую инструкцию отдельно, то код будет выглядеть вот так:

Эти две записи абсолютно идентичны.

А теперь давайте более конкретно разберем все специфичные свойства фонов.

Свойство background-color

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

Также может принимать значение transparent (прозрачный фон). Кстати, по умолчанию фон каждого элемента имеет значение transparent. Поэтому, если вы не определите цвет фона каждого элемента, то цвет фона дочерних элементов совпадает с цветом фона родительского элемента.

Пример использования цвета фона:

Для этого контейнера задано свойство фона:

Свойство background-image

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

Пример применения свойства:

Эта инструкция определяет фоновую картинку, которая находится по адресу url (images/bg.jpg) для всех элементов с идентификатором класса .box

Также может иметь значение none. Оно отменяет применение фоновой картинки к элементу.

Продолжим развивать наш пример из прошлого пункта (добавим к нему фоновую картинку):

Мы добавили к коду свойство background-image. И теперь он выглядит так:

Как видите, картинка добавилась, но поскольку ее размер меньше нашего контейнера — она растиражировалась. Чтобы этого не происходило — используем следующее свойство.

Свойство background-repeat

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

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

Свойство background-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 — Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

Продолжим работать с нашим примером (уберем тиражирование):

Мы добавили к нашему коду свойство background-repeat и теперь фоновая картинка не тиражируется.

Теперь неплохо было бы выровнять картинку по центру.

Свойство background-position

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

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

У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах и прочих единицах измерения CSS. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной или иной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

  • top left = left top = 0% 0% (в левом верхнем углу)
  • top = top center = center top = 50% 0% (по центру вверху)
  • right top = top right = 100% 0% (в правом верхнем углу)
  • left = left center = center left = 0% 50% (по левому краю и по центру)
  • center = center center = 50% 50% (по центру)
  • right = right center = center right = 100% 50% (по правому краю и по центру)
  • bottom left = left bottom = 0% 100% (в левом нижнем углу)
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу)
  • bottom right = right bottom = 100% 100% (в правом нижнем углу)

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

Вернемся к нашему примеру (выровняем фоновую картинку по центру):

Код теперь выглядит вот так:

Использование нескольких фоновых изображений

Давайте теперь на наш пример наложим еще один слой фона. На нем нанесем несложный узор на наш контейнер.

Тут нужно учесть, что фон, который указан первым будет расположен сверху, а второй — под ним. Если слоев больше двух, то соответственно слои будут располагаться в порядке их указания в свойстве background-image.

Для этого мы немного изменили код. Теперь он выглядит вот так:

Хочу отметить, что размер картинки узора всего 6×6 пикселей. Поэтому мы ее растиражировали по горизонтали и вертикали. Для этого мы также (через запятую в свойстве background-repeat) прописали значение для второго фона. Значения для каждого фона нужно располагать в том же порядке, что и в свойстве background-image.

Заключение.

Это основные (наиболее часто используемые) CSS свойства для фонов. также к основным можно отнести свойство background-size. Его применение я подробно описал в статье: «Управление размером фонового изображения при помощи CSS».

Кроме них есть еще несколько дополнительных свойств. Мы рассмотрим их завтра. Не пропустите. Подписывайтесь на обновления.

P.S.: Если к нашему примеру добавить еще несколько свойств границ, то мы получим вот такой код.

. И вот такую симпатичную кнопку.

Подробное описание CSS свойств границ можно найти здесь.

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