Xiper

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;
}

В живую. В других возможно придется использовать псевдоэлементы или еще как-то выкручиваться.