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

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

 

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

 

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

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

 

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

 

background-repeat: round space; /* ширина меняется, высота нет */

background-repeat: space round; /* ширина исходная, высота меняется */

background-repeat: space no-repeat; /* повторять только по горизонтали */

 

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

 

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

 

Комментарии запрещены.