Свойство background-repeat позволяет задать повторение по горизонтали и вертикали для картинки, установленной с помощью свойства background-image.
Возможные значения:
repeat — повторение по горизонтали и по вертикали.
repeat-x — повторение по горизонтали.
repeat-y — повторение по вертикали.
no-repeat — изображение не повторяется.
Значение по умолчанию: repeat
Наследуется: нет
Можно указывать два значения через запятую, тогда первое значение указывает повторение по горизонтали, а второе значение указывает повторение по вертикали.
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <title>CSS background-repeat</title> <meta http-equiv="Content-Type" content="text/html;charset=utf8"> <style> div { width : 100px; /* Ширина */ height : 100px; /* Высота */ border : 1px solid #000000; /*Ширина границы элементов*/ margin : 5px 5px 5px 5px; /* Внешние отступы от других элементов */ background-image : url("images/mybackground.png"); } #repeat { background-repeat : repeat; } #repeatX { background-repeat : repeat-x; } #repeatY { background-repeat : repeat-y; } #noRepeat { background-repeat : no-repeat; } </style> </head> <body> <div id="repeat"> background-repeat: repeat; </div> <div id="repeatX"> background-repeat : repeat-x; </div> <div id="repeatY"> background-repeat : repeat-y; </div> <div id="noRepeat"> background-repeat : no-repeat; </div> <a href="https://urvanov.ru/2016/02/12/css-background-repeat/">CSS background-repeat</a> </body> </html> |