В общем, напишу, что сделал я. Демо можно посмотреть здесь
На фон для body я поставил картинку с эффектом blur, сверху div с фоном такой же картинки, но без эффекта. В div вставил изображение круга. Чтобы у div фон не был полной картинкой, дописываем в css
background-attachment: fixed;
Полный код страницы:
<html>
<head>
<meta charset="UTF-8">
<title>AzHava.COM</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(window).load(function(){
$('#main').animate({
"left": "+=500px",
"top":"+=200px"
}, 2000, "swing");
}); });
</script>
<style type="text/css">
body{
background-image: url("2-2.jpg");
background-size: cover;
background-repeat: no-repeat;
}
div.main {
margin: 0;
left: 100px;
background-image: url("1.jpg");
background-repeat: no-repeat;
position: absolute;
background-attachment: fixed;
border-radius: 100%;
background-size: cover;
}
</style></style>
</head>
<body>
<div id="main" class="main"><img src="circle.png"></div>
</body>
</html>
