Свойство background-attachment позволяет задать поведение фона при прокручивании содержимого.
Возможные значения:
fixed — изображение остаётся на месте при прокручивании.
scroll — изображение прокручивается вместе с прокруткой содержимого.
local — изображение прокручивается не только вместе с прокруткой содержимого, но и с прокруткой самого элемента. Это сложно объяснить, лучше смотрите результат работы примера ниже.
Значение по умолчанию: scroll
Наследуется: нет
Пример:
|
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!DOCTYPE html> <html> <head> <title>CSS background-attachment</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> .divFixed { background-image : url("images/mybackground.png"); background-attachment : fixed; width : 100px; height : 100px; overflow : scroll; } .divScroll { background-image : url("images/mybackground.png"); background-attachment : scroll; width : 100px; height : 100px; overflow : scroll; } .divLocal { background-image : url("images/mybackground.png"); background-attachment : local; width : 100px; height : 100px; overflow : scroll; } .divContainer { width : 150px; height : 150px; overflow : scroll; } </style> </head> <body> <div class="divContainer"> <div class="divFixed"> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> fixed<br> </div> <div class="divScroll"> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> scroll<br> </div> <div class="divLocal"> local<br> local<br> local<br> local<br> local<br> local<br> local<br> local<br> local<br> </div> </div> <a href="https://urvanov.ru/2016/02/12/css-background-attachment/">CSS background-attachment</a> </body> </html> |