Пятница, 08 Июня 2012 13:30

Background-repeat. Изучаем его возможности на примерах

Written by 
Оцени эту запись
(2 Голоса)

Думаю, многие знают о таком замечательном свойстве, как background-repeat. Это расширение свойства background, которое дает возможность указывать фоновую картинку не огромного размера, а ее маленького кусочка, и повторять ее горизонтально и/или вертикально. У свойства background есть такие возможности, как сам фон картинкой background-image или цветом background-color, его повторы background-repeat, позиция фона background-position. 

 

 

Свойства фона отдельно:

background-color: #222;

background-image: url(img1.jpg);

background-position: 0px -20px;

background-repeat: no-repeat;

 

Или вместе:

background: #222 url(img1.jpg) 0px -20px no-repeat;

 

В этой статье мы подробно рассмотрим свойство background-repeat. 

 

 

Background-repeat может принимать такие значения:

 

  • no-repeat
  • repeat
  • repeat-x
  • repeat-y

 

Его можно использовать для задания фона сайта или для стилизации маленькой иконки. Рассмотрим на первом варианте, поскольку во втором обычно используется значение no-repeat.

 

Демо - Background-repeat

 

На демо 4 типа фона - маленькие квадратики, градиент, полоски и картинка.

 

 

.bg1, .bg2, .bg3, .bg4 {width: 100%; height: 200px;}
.bg1 {background: url(images/bg1.png); background-repeat: repeat;}
.bg2 {background: url(images/bg2.png); background-repeat: repeat-x; }
.bg3 {background: url(images/bg3.png); background-repeat: repeat;}
.bg4 {background: url(images/bg4.png); background-repeat: no-repeat;}
.bg5 {background: #a6a8ab url(images/bg2.png); background-repeat: repeat-x; }
 
 
У первого блока фоном стоит картинка, размером 10px*10px, на которой изображен один квадратик. Если у вас есть дизайн с подобным фоном, выделите в нем кусочек, который будет четко повторяться. Это могут быть не только квадратики, могут быть вертикальные, горизонтальные или диагональные полосочки или любой другой элемент узора. Как видите в стилях, мы этому блоку задали фоновую картинку background: url(images/bg1.png) и повтор по горизонтали и по вертикали background-repeat: repeat.
 
 
Во втором случае у блока есть градиент от серого до прозрачного. Подобные фоны делаются вырезанием из полной картинки кусочка шириной в 1px. Если бы градиент был не вертикальным, а горизонтальным, то нужно было бы вырезать кусок высотой 1px. Идея в том, чтобы захватить фрагмент фона, который является уникальным и повторить его стилями там, где он это позволяет.
У этого блока, в отличие от первого свойство background-repeat имеет значение repeat-x, то есть повторяем только по горизонтали.

 

В пятом блоке стили подобны второму блоку. Там используется таже картинка, только еще задан фоновый цвет. Такая штука очень часто нужна. Часто любят на сайте сверху или снизу влепить градиент(тень или свечение). Тогда смотрите, где цвет повторяется, задаете его фоновым цветом. У сам градиент вырезаете картинкой. Если тень идет снизу сайта, то еще нужно будет воспользоваться свойством background-position: left bottom.

 

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

 

 

 

 

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

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов