shoemaker/responsiveBackground.html

## responsiveBackground.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Responsive Background Sandbox</title>
	    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
	    <!--[if lt IE 9]>
	      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]-->
		<style>
			body {
				background-color: #FFFFFF;
				color: #222222;
				margin: 0;
				padding: 0;
				font-family: HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
				font-size: 14px;
			}

			section {
				padding: 5px;
				margin: 0 0 10px 0;
			}

			#responsiveSizes {
				list-style: none;
			}

			#responsiveSizes li {
				float: left;
				padding: 5px;
				margin: 0 10px 0 10px;
			}

			#intro {
				background: url('http://placehold.it/1200x350');
				min-height: 350px;
			}

			h1, h2, h3, h4, h5 {
				font-weight: 400;

			}

			/* Landscape phones and down */
			@media (max-width: 480px) {

				body {

				}

				p {
					font-family: inherit !important;
				}

				#intro {
					background: url('http://placehold.it/480x200');
					min-height: 200px;
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
				}


				#resp480 {
					background-color: #DFF0D8;
					border: 1px solid #D6E9C6;
					color: #468847;
				}
			}

			/* Landscape phone to portrait tablet */
			@media (min-width: 481px) and (max-width: 767px) {
				body {

				}

				#intro {
					background: url('http://placehold.it/768x250');
					min-height: 250px;
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
				}

				#resp768 {
					background-color: #DFF0D8;
					border: 1px solid #D6E9C6;
					color: #468847;
				}

			}

			/* Portrait tablet to landscape and desktop */
			@media (min-width: 768px) and (max-width: 991px) {
				body {

				}

				#intro {
					background: url('http://placehold.it/992x300');
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
					min-height: 300px;
				}

				#resp768plus {
					background-color: #DFF0D8;
					border: 1px solid #D6E9C6;
					color: #468847;
				}
			}

			@media (min-width: 992px) and (max-width: 1199px) {
				body {

				}

				#intro {
					background: url('http://placehold.it/1200x350');
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
					min-height: 350px;
				}

				#resp992 {
					background-color: #DFF0D8;
					border: 1px solid #D6E9C6;
					color: #468847;
				}
			}

			/* Large desktop */
			@media (min-width: 1200px) {
				#intro {
					background: url('http://placehold.it/1600x350');
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
				}

				#resp1200 {
					background-color: #DFF0D8;
					border: 1px solid #D6E9C6;
					color: #468847;
				}
			}

		</style>
	</head>
	<body>
		<section id="debug">
			<p>
				Window size: <span id="size"></span> pixels.
			</p>
			<ul id="responsiveSizes">
				<li id="resp480">Phones (&lt;480px)</li>
				<li id="resp768">Phones (&lt;768px)</li>
				<li id="resp768plus">Tablets (&gt;=768px)</li>
				<li id="resp992">Desktops (&gt;=992px)</li>
				<li id="resp1200">Desktops (&gt;=1200px)</li>
			</ul>
		</section>

		<div style="clear:both"></div>

		<section id="intro">
			<h3>Responsive Background Sandbox</h3>
			<p>
				Next level blog mlkshk, eu chambray gastropub umami Etsy quinoa you probably haven't heard of them tote bag flannel Pitchfork duis. PBR&B master cleanse reprehenderit scenester small batch, organic drinking vinegar. Ad put a bird on it scenester YOLO, actually gastropub id vegan irure Portland. Single-origin coffee synth pug forage.
			</p>
		</section>
		<section>
			Nihil craft beer Marfa labore distillery raw denim, four loko disrupt art party plaid DIY. Readymade ullamco Shoreditch qui, cliche butcher Truffaut trust fund lomo ethnic yr +1 exercitation commodo skateboard. Kitsch skateboard PBR, pickled minim direct trade before they sold out aesthetic American Apparel vinyl wolf bitters iPhone four loko stumptown. Viral small batch hella excepteur, Echo Park McSweeney's officia Tumblr church-key commodo forage craft beer plaid. YOLO post-ironic consequat, craft beer readymade try-hard in 90's excepteur minim paleo art party banjo selfies VHS. Ut ethical whatever letterpress officia, Shoreditch plaid. Sriracha ennui Godard vinyl sapiente Austin.
		</section>
		<script>
			window.onresize = function() {
				document.getElementById('size').innerHTML = window.innerWidth;
			};
			document.getElementById('size').innerHTML = window.innerWidth;
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Responsive Background Sandbox</title>
	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style>
	body {
	background-color: #FFFFFF;
	color: #222222;
	margin: 0;
	padding: 0;
	font-family: HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	}

	section {
	padding: 5px;
	margin: 0 0 10px 0;
	}

	#responsiveSizes {
	list-style: none;
	}

	#responsiveSizes li {
	float: left;
	padding: 5px;
	margin: 0 10px 0 10px;
	}

	#intro {
	background: url('http://placehold.it/1200x350');
	min-height: 350px;
	}

	h1, h2, h3, h4, h5 {
	font-weight: 400;

	}

	/* Landscape phones and down */
	@media (max-width: 480px) {

	body {

	}

	p {
	font-family: inherit !important;
	}

	#intro {
	background: url('http://placehold.it/480x200');
	min-height: 200px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	}


	#resp480 {
	background-color: #DFF0D8;
	border: 1px solid #D6E9C6;
	color: #468847;
	}
	}

	/* Landscape phone to portrait tablet */
	@media (min-width: 481px) and (max-width: 767px) {
	body {

	}

	#intro {
	background: url('http://placehold.it/768x250');
	min-height: 250px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	}

	#resp768 {
	background-color: #DFF0D8;
	border: 1px solid #D6E9C6;
	color: #468847;
	}

	}

	/* Portrait tablet to landscape and desktop */
	@media (min-width: 768px) and (max-width: 991px) {
	body {

	}

	#intro {
	background: url('http://placehold.it/992x300');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	min-height: 300px;
	}

	#resp768plus {
	background-color: #DFF0D8;
	border: 1px solid #D6E9C6;
	color: #468847;
	}
	}

	@media (min-width: 992px) and (max-width: 1199px) {
	body {

	}

	#intro {
	background: url('http://placehold.it/1200x350');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	min-height: 350px;
	}

	#resp992 {
	background-color: #DFF0D8;
	border: 1px solid #D6E9C6;
	color: #468847;
	}
	}

	/* Large desktop */
	@media (min-width: 1200px) {
	#intro {
	background: url('http://placehold.it/1600x350');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	}

	#resp1200 {
	background-color: #DFF0D8;
	border: 1px solid #D6E9C6;
	color: #468847;
	}
	}

	</style>
	</head>
	<body>
	<section id="debug">
	<p>
	Window size: <span id="size"></span> pixels.
	</p>
	<ul id="responsiveSizes">
	<li id="resp480">Phones (<480px)</li>
	<li id="resp768">Phones (<768px)</li>
	<li id="resp768plus">Tablets (>=768px)</li>
	<li id="resp992">Desktops (>=992px)</li>
	<li id="resp1200">Desktops (>=1200px)</li>
	</ul>
	</section>

	<div style="clear:both"></div>

	<section id="intro">
	<h3>Responsive Background Sandbox</h3>
	<p>
	Next level blog mlkshk, eu chambray gastropub umami Etsy quinoa you probably haven't heard of them tote bag flannel Pitchfork duis. PBR&B master cleanse reprehenderit scenester small batch, organic drinking vinegar. Ad put a bird on it scenester YOLO, actually gastropub id vegan irure Portland. Single-origin coffee synth pug forage.
	</p>
	</section>
	<section>
	Nihil craft beer Marfa labore distillery raw denim, four loko disrupt art party plaid DIY. Readymade ullamco Shoreditch qui, cliche butcher Truffaut trust fund lomo ethnic yr +1 exercitation commodo skateboard. Kitsch skateboard PBR, pickled minim direct trade before they sold out aesthetic American Apparel vinyl wolf bitters iPhone four loko stumptown. Viral small batch hella excepteur, Echo Park McSweeney's officia Tumblr church-key commodo forage craft beer plaid. YOLO post-ironic consequat, craft beer readymade try-hard in 90's excepteur minim paleo art party banjo selfies VHS. Ut ethical whatever letterpress officia, Shoreditch plaid. Sriracha ennui Godard vinyl sapiente Austin.
	</section>
	<script>
	window.onresize = function() {
	document.getElementById('size').innerHTML = window.innerWidth;
	};
	document.getElementById('size').innerHTML = window.innerWidth;
	</script>
	</body>
	</html>