A CodePen by Johanna Ruiz. Background-Clips in Space. (Webkit only) - I had an idea about draggable elements with static background images and utilizing the background-clip:text css3 property, I wanted to see if the background image would remain static and the element would drag. A little jQuery UI and voila, it did what I thought it would. Unfo…

index.html

<h1>Space</h1>

script.js

$(function() {
        $( "h1" ).draggable();
      });

style.css

html { 
  overflow-y: scroll; 
  overflow-x:hidden; 
}
* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}
body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 300;
	background:black;
	background-image:url(http://johannabruiz.com/images/codepen-images/space-test-2.jpg);
	background-repeat:no-repeat;
	background-position:0, 0;
	background-attachment:fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
body:before{
	width:100%;
	height:100%;
	content:" ";
	position:absolute;
	z-index:1;
	background-color:rgba(0, 0, 0, 0.8);
}
h1{
  font-family:"Helvetica";
  font-weight:500;
	 font-size:20em;
	 color:black;
	 margin:0 auto;
 	background-image:url(http://johannabruiz.com/images/codepen-images/space-test.jpg);
	 background-size:100%;
	 color:transparent;
	 background-repeat:no-repeat;
	 background-position:0 0;
	 background-attachment:fixed;
	 -webkit-background-clip: text;
	 -moz-background-clip: text;
	 background-clip: text;
	 -webkit-filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.5));
	 z-index:2;
	 cursor:pointer;
}