Если навесить фон на текст, он будет выглядеть довольно просто, но если строки начинают переносится, фон пересекается не особо красиво... Что бы нам помочь, сделано свойство в CSS outline. О нём писал ранее, в статье о CSS debag’e.

Что же за зверь такой, этот outline — это внутренний бордер элемента, который не влияет на параметры длины элемента... Параметры такие же как у бордера

* { outline: #outline-color   outline-style outline-width px }

Для примера посмотрим на текст с разными свойствами:

Просто перенос	line-height: 90%	outline: 1px solid red	font-family: ’Calibri’
HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО

Вывод, вопрос «можно решить»:

• через line-height, но когда у текста паддинг выглядит не очень
• через подстановку другого фонта, и опять паддинг
• с помощью outline. Казалось бы, задача решена, но есть одно но, или даже два — это старые ИЕ и тупая Опера, которая с этим свойством делает что хотит. Ещё иногда в ФФ при больших значениях падинга текста, и аутлайне, появляются артефакты, но они лечатся с помощью -moz-outline-offset (достаточно указать смещение на полпихеля)

Есть ещё одна проблема, фон картинкой будет выглядеть ужасТно. Что же делать с толпой недобраузеров и фоновой картинкой? Тут приходится хитрить. Для этого можно просто использовать 3 спана (position: relative;), 2 которых смещены друг от друга в разные стороны + кастомный фонт

3 spans (left: -5px, 5px, -2.5px)	всё + line-height: 95%	background-image	background-attachment: fixed
HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО
Тут всё круто	line-height делает прикольній декор	фон едет на следующей строке	fixed — правит это всё, но не для ИЕ6-7 (нужен expression)

Итого мы имеем:

.smaple, .sampleB {
	font-size: 18px;
	font-family: 'Calibri', 'Trebuchet MS'; 
	line-height: normal;
}
.sample span {
	position: relative;
	background: red;
	color: white;
	left: -5px;
}
	.sample span span {left: 5px;}
	.sample span span span {left: -2.5px;}
	
.sampleB span {
	position: relative;
	background: transparent url('bg.png') 0 0 fixed repeat;
	left: -5px;
}
	.sampleB span span {left: 5px;}
	.sampleB span span span {left: -2.5px;}

ps: по материалам chikuyonok.ru — Серёге привет!