jQuery Custom Background System

custom_bg.css

#customBackground > div {
	display: table;
	margin: 0 auto;
}
#customBackground span {
	display: block;
	float: left;
	width: 145px;
	height: 90px;
	border-radius: 7px;
	-webkit-box-shadow:inset rgba(0,0,0,1) 0 1px 12px, rgba(255,255,255,0.05) 0 1px 0, rgba(255,255,255,0.2) 0 0 0 1px;
	-moz-box-shadow:inset rgba(0,0,0,1) 0 1px 12px, rgba(255,255,255,0.05) 0 1px 0, rgba(255,255,255,0.2) 0 0 0 1px;
	box-shadow:inset rgba(0,0,0,1) 0 1px 12px, rgba(255,255,255,0.05) 0 1px 0, rgba(255,255,255,0.2) 0 0 0 1px;
	margin-right: 15px;
	cursor: pointer;
	position: relative;
	background: #000 no-repeat 45% 5%;
	-webkit-background-size: auto 180% !important;
	-moz-background-size: auto 180% !important;
	background-size: auto 180% !important;
	-webkit-transition: all 2.5s ease-in-out;
	-moz-transition: all 2.5s ease-in-out;
	-o-transition: all 2.5s ease-in-out;
	transition: all 2.5s ease-in-out;
}
#customBackground span:hover {
	box-shadow: inset rgba(0,0,0,1) 0 1px 8px, rgba(255,255,255,0.05) 0 1px 0, rgba(255,255,255,0.35) 0 0 1px;
	background-position: 65% 5%;
}
#customBackground span:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 45px;
	background: -moz-linear-gradient(top, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.07) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.18)), color-stop(100%,rgba(255,255,255,0.07)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.07) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.07) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.07) 100%);
	background: linear-gradient(top, rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.07) 100%);
	-moz-border-radius: 7px 7px 0 0;
	border-radius: 7px 7px 0 0
}
#customUrl {
	clear: left;
	padding-top: 10px;
	text-align: center;
}
#customInput {
	border: 0;
	box-shadow: inset rgba(0,0,0,0.75) 0 1px 3px, rgba(255,255,255,0.15) 0 1px 0;
	color: #536482;
	padding: 0 10px;
	font-size: 20px;
	line-height: 40px;
	height: 40px;
	width: 780px;
	white-space: nowrap;
	border-radius: 4px;
	margin-right: 8px;
}
#customSubmit {
	line-height: 40px;
	font-size: 20px;
	display: inline-block;
	font-weight: normal;
	cursor: pointer;
	background: #686c73;
	background: rgba(197,206,213,0.4);
	color: #536482;
	box-shadow: rgba(0,0,0,0.6) 0 1px 3px;
	padding: 0 10px;
	border-radius:4px;
}
#customSubmit:hover {
	background-color: #898f96;
	background-color: rgba(197,206,213,0.6);
}
#toggleBackground { display: none; margin-bottom: 8px;}
#customBackground {
	position: relative;
	padding: 15px 0 15px 15px;
	overflow: hidden;
	border-radius: 5px;
	border: 1px solid #A8D8E3;
}

custom_bg.html

<div id="toggleBackground">
	<div id="customBackground">
		<div>
			<span id="bg1" style="background-image: url(background1.png);"></span>
			<span id="bg2" style="background-image: url(background2.png);"></span>
			<span id="bg3" style="background-image: url(background3.png);"></span>
		</div>
		<div id="customUrl">
			<input type="text" id="customInput" placeholder="Or write your URL and press Change" />
			<strong id="customSubmit">Change</strong>
		</div>
	</div>
</div>

custom_bg.js

jQuery(document).ready(function($){
  
	// Feature detect + local reference
	var storage,
		fail,
		uid;
	try {
		uid = new Date;
		(storage = window.localStorage).setItem(uid, uid);
		fail = storage.getItem(uid) != uid;
		storage.removeItem(uid);
		fail && (storage = false);
	} catch(e) {}

	if (storage) {
		$('#changeBackground').click(function(){
			$('#toggleBackground').slideToggle();
			return false;
		});

		$('#customBackground span').click(function(){
			storage.removeItem('customURL');
			var bgid = $(this).attr('id');
			storage.customBG = bgid;
			$('#boardWrapper').removeClass().addClass(bgid);
		});

		$('#customSubmit').click(function(){
			storage.customBG = 'url';
			var customurl = $('#customInput').val();
			storage.customURL = customurl;
			$('<style>#boardWrapper.bg_custom { background-image: url(' + customurl + ')}</style>').appendTo('head');
			$('#boardWrapper').removeClass().addClass('bg_custom');
		});

		if (storage.customBG !== null) {
			$('#boardWrapper').addClass(storage.customBG);
		}
		else{
			$('#boardWrapper').addClass('bg1');
		}

		if (storage.customURL !== null) {
			$('<style>#boardWrapper.bg_custom { background-image: url(' + storage.customURL + ')}</style>').appendTo('head');
			$('#boardWrapper').addClass('bg_custom');
		}

		$('#customInput[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
			input.val('');
			input.removeClass('placeholder');
      }
		}).blur(function() {
      var input = $(this);
      if (input.val() === '' || input.val() == input.attr('placeholder')) {
			input.addClass('placeholder');
			input.val(input.attr('placeholder'));
      }
		}).blur();
	} else {
		$('#changeBackground').remove();
		$('#boardWrapper').addClass('bg1');
	}
});