background position со смещением
Автор: Евгений Рыжков Дата публикации:
Проблема
В CSS3 есть возможность расположить фон со смещением относительно позиции:
div {
width: 300px;
border: 1px solid red;
background: url(images/mortal.jpg) no-repeat;
background-position: right 30px bottom 30px;
}
Это поддерживается всеми современными браузерами за исключением webkit. И возможно они вообще не будут поддерживать данную возможность.
Решение
В некоторых случаях может спасти background-origin в сочетании с padding:
div {
margin: 20px;
width: 300px;
border: 1px solid red;
padding: 30px;
background: url(images/mortal.jpg) no-repeat;
background-position: right bottom;
background-origin: content-box;
}
В живую. В других возможно придется использовать псевдоэлементы или еще как-то выкручиваться.