background position со смещением
Дата публикации: 06.01.2013
Проблема
В 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;
}
В живую. В других возможно придется использовать псевдоэлементы или еще как-то выкручиваться.
  Теги: CSS приемы  
Показать комментарии
