Размытый фон
Воскресенье, 17 июня 2012

А давайте я вам расскажу, как делать размытый фон у дива. Ну почти как на этом сайте, пока я его не выпилил:

Размытый фон

Размытый фон

Главная идея в том, что нужно синхронизировать фон у основного дива (неразмытый) с фоном у наложенного дива (размытый). Я, например, делал это с помощью background-attachment: fixed.

<body>
  <div class="panel"></div>
</body>
body {
  background: url(bg.jpg) no-repeat center fixed;
}

.panel {
  background: url(bgblur.jpg) no-repeat center fixed;
}

Получается, что фон у body и у div.panel статичны относительно экрана, а потому синхронизированы относительно друг друга. Думаю, есть и другие способы синхронизации, но я их не рассматривал.

← EclipseIT_Ground #10 →