Fixed-Background-Illusion.markdown

Fixed Background Illusion

This bit of CSS demonstrates how two fixed backgrounds (in this case, one black and white, the other color) can be layered so that the view port div of the top layer, appears to change the state of the bottom layer. This effect works well with a blurred/clear image as well. Your imagination is the limit! Enjoy!

A Pen by Steve Reich on CodePen.

License.

index.html

<div id="bw"></div>
<div id="color">drag me</div>

script.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script language="JavaScript" type="text/javascript">
		$(function(){
			$color = $('#color').draggable({containment:'#bw'});
		})
</script>

style.css

		@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
html, body {
  margin:0;
  padding:0;
}
#bw {
  background:#000 url(https://dl.dropboxusercontent.com/s/ll17fqmkham1ekx/bw.jpg) left top no-repeat fixed;
  background-size:100% 100%;
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
#color{
  position:absolute;
  /* Text style within circle */
  font-family:'Open Sans',sans-serif;
  font-weight:300;
  font-size:3em;
  text-align:center;
  /* Line height on text vertical aligns text */
  line-height:250px;
  color:rgba(255,255,255,.2);
  /* Position and size of circle */
  top:50px;
  left:50px;
  height:250px;
  width:250px;
  border:1px #333 solid;
  /* FIXED background of color image of body background */
  background:url(https://dl.dropboxusercontent.com/s/agv5idk1mjrcxbh/color.jpg) left top no-repeat fixed;
  background-size:100% 100%;
  /* Border Radius half the width and height to make a circle */
  -webkit-border-radius: 175px;
  -moz-border-radius: 175px;
  border-radius: 175px;
  /* Inset box shadow to make color image appear to be underneath the circle */
  -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,.5) inset; 
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,.5) inset;            
  box-shadow: 5px 5px 10px 0px rgba(0,0,0,.5) inset;
  text-shadow:1px 1px 0px rgba(0,0,0,.2);
  /* Move icon gives direction */
  cursor:move;
  z-index:1;
}