Свойство background-position позволяет указать местоположение фоновой картинки. Указывается два значения: по горизонтали и по вертикали.
Синтаксис:
|
1 |
background-position: позицияX позицияY |
Возможные значения:
left — по левому краю (для первого значения)
center — по центру
right — по правому краю (для первого значения)
top — по верхнему краю (для второго значения)
bottom — по нижнему краю (для второго значения)
проценты — для указания позиции в процентах
размер — для указания позиции в пикселях или других единицах измерения
Значение по умолчанию: 0% 0% (то же самое, что и left top)
Наследуется: нет
Пример:
Картинка:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>CSS background position</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> body { background-image : url("images/mybackground.png"); background-position : 10px 10px; } </style> </head> <body> <a href="https://urvanov.ru/2016/02/12/css-background-position/">CSS background-position</a> </bodY> </html> |
Посмотреть результат. Обратите внимание, что начало изображения смещено от левого верхнего края страницы и там виден конец предыдущего изображения.