Мало кто знает, что CSS умеет применять различные несложные фильтры, включая популярный blur. Поддерживается во всех популярных браузерах актуальных версий. Сама по себе технология достаточно проста:

#some {
background: url("адрес изображения");
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}

<div id="some"></div>

Впрочем, есть небольшие нюансы. Если внутри условного дива #some будет что-то ещё, тогда ко всему содержимому тоже применяется этот фильтр, в итоге весь текст заблюрен и читать что-либо на всём этом не получится. Однако, если не использовать внутри #some, а, скажем, применить свойство z-index и "загнать" #some под другой див, мы получим необходимый нам эффект - заблюренный фон и чёткое содержимое.

Естественно, фильтр можно применять не только для фонов, но так же и для изображений. Пример:

.some{
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px); }

<img src="адрес" class="some">

Можно убирать фильтр при наведении:

.some:hover{
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px); }

Используя rgb, можно сделать "накладку" на заблюренный фон с разной степенью прозрачности, что доставляет:

.upsome{
background: rgba(255,255,255,0.5);
z-index: 100;}
#some {
background: url("адрес изображения");
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
z-index: 99;}

После игры с позиционированием и тенями, можем получить что-то наподобие: