Текст на блюреном фоне

хтмл:

<div class="header">
	<h1>jQuery Selectric <img alt="Selectric ⚡" src="img/icon.png"></h1>
	<p>Fast, simple and light jQuery plugin <br> to customize HTML selects</p>
</div>

цсс:

.header {
    background: url("img/header.jpg") no-repeat scroll 50% 50% / cover rgba(0, 0, 0, 0);
    box-shadow: 0 1px 2px 1px #999;
    color: #f0f0f0;
    height: 400px;
    overflow: hidden;
    padding-bottom: 20px;
    text-align: center;
}

.header h1 {
    font-size: 42px;
    margin: 120px 0 20px;
    text-align: center;
    text-shadow: 0 1px 1px #666;
}

.header h1 img {
    position: relative;
    top: -3px;
}

.header p {
    font-family: "Ubuntu",sans-serif;
    font-size: 22px;
    margin: auto;
    max-width: 600px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

пример