Свойство background repeat – Фон в CSS. Параметры background (color, image, position, repeat, attachment) для задания цвета фона или фоновой картинки html элементов

Свойство background-repeat | CSS справочник

CSS свойства

Определение и применение

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

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

CSS синтаксис:

 background-repeat: "repeat | repeat-x | repeat-y | no-repeat | initial | inherit";

JavaScript синтаксис:

object.style.backgroundRepeat="repeat-y"

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

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Свойство background-repeat</title>
<style> 
.primer {
background-image:url("smile.png"); /* задаём изображение для заднего фона */
background-position:center; /* задаём положение изображения */
background-repeat:repeat-y; /* повторяем изображение вертикально */
background-color:khaki; /* задаём цвет заднего фона */
height:300px; 
width:300px;
}
</style>
</head>
	<body>
		<div class = "primer"></div>
	</body>
</html>
Пример использования свойства background-repeat.CSS свойства

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

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

Перечислим их:

  • 1
    
    background-repeat: round
    
  • 1
    
    background-repeat: space
    

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

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

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

.rnd{
  width: 700px;
  height: 500px;
  margin: 10px;
  border: 1px solid #000;
  background-image: url(img/ChristinaVujnich.jpg);
  background-position: top left;
  background-repeat: repeat;
}

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

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

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

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

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

.rnd{
  width: 700px;
  height: 500px;
  margin: 10px;
  border: 1px solid #000;
  background-image: url(img/ChristinaVujnich.jpg);
  background-position: top left;
  background-repeat: round;
}

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

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

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

Принцип работы этого свойства аналогичен значению

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

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

.rnd{
  width: 700px;
  height: 500px;
  margin: 10px;
  border: 1px solid #000;
  background-image: url(img/ChristinaVujnich.jpg);
  background-position: top left;
  background-repeat: space;
}

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

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

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

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

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

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

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

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

.element {
  width: 550px;
  height: 400px;
  background: transparent url(bg.jpg) repeat 0 0; /* for all browsers */
}

.bgrepeatspace .element {
  background-repeat: space; /* for supporting browsers */
}

Заключение

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

CSS3′s ‘space’ and ‘round’ Values for background-repeat

На этом все.


background-repeatroundspace

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

Всем привет.

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

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

Приступим.

Свойство background

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

.box {
     background: #ffffff url(images/bg.png) repeat-x;}

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

.box {
     background-color: #ffffff;
     background-image: url(images/bg.png);
     background-repeat: repeat-x;}

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

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

Свойство background-color

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

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

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

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

background-color:#83c5de;

Свойство background-image

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

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

.box {
     background-image: url(images/bg.jpg);}

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

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

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

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

background-color:#83c5de;
background-image: url(images/fsm-logo-small.png);

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

Свойство 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-color:#83c5de;
background-image: url(images/fsm-logo-small.png);
background-repeat: no-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-color:#83c5de;
background-image: url(images/fsm-logo-small.png);
background-repeat: no-repeat;
background-position: center;

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

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

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

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

background-color:#83c5de;
background-image: url(images/fsm-logo-small.png), url(/images/uzor-bg.png);
background-repeat: no-repeat, repeat;
background-position: center;

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

Заключение.

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

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

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

background-color:#9fe5ff;
background-image: url(images/fsm-logo-small.png), url(/images/uzor-bg.png), url(images/gradient-bg.png);
background-repeat: no-repeat, repeat, repeat-x;
background-position: center;
border:4px solid #ffffff;
border-radius:12px;
box-shadow:0 0 3px #666666;

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

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

 

Свойство background | CSS справочник

CSS свойства

Определение и применение

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

Значения следующих свойств могут быть установлены:


Обращаю Ваше внимание на то, что если Вы используете для фона элемента значения position и size вместе, то вы должны при этом разделять их слэшем "/" (position/size).


Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

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

CSS синтаксис:

background:"color image position/size repeat origin clip attachment initial | inherit";

JavaScript синтаксис:

object.style.background="blue no-repeat"

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

ЗначениеОписание
background-colorОпределяет цвет фона (HEX, RGB, RGBA, HSL, HSLA, "Предопределённые цвета").
background-imageЗадает одно или несколько фоновых изображений для элемента.
background-positionЗадает положение (позицию) фонового изображения.
background-sizeОпределяет размер фонового изображения/-ий.
background-repeatУстанавливает, как фоновое изображение будет повторяться.
background-originОпределяет область позиционирования фонового изображения/-ий.
background-clipОпределяет область рисования фона.
background-attachmentУстанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1 (в CSS3 добавлены свойства background-size, background-origin и background-clip).

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования универсального свойства background</title>
<style> 
.primer {
background:#00FF00 url('/images/smile.png') repeat-x center; /* свойства фона для элемента */
height:150px; /* высота элемента */
}
</style>
</head>
	<body>
		<div class = "primer"></div>
	</body>
</html>

В этом примере с использованиме CSS свойства height мы задали для блочного элемента <div> высоту 150 пикселей и с использованием универсального CSS свойства background указали следующие значения для его фона:

  • зеленый цвет заднего фона в шестнадцатерично системе указания цвета - #00FF00 (background-color).
  • путь к изображению, которое используется в качестве заднего фона (smile.png) (

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *