Splash Screen Aspect Ratio Test

dabblet.css

/**
 * Splash Screen Aspect Ratio Test
 */

html {
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	font-family: Helvetica, sans-serif;
	font-weight: bold;
}

.toast {
	position: absolute;
	margin: 20px;
	padding: 10px;
	background: #666;
	color: white;
	opacity: 0.8;
}
.toast.hidden {
	display: none;
}
#toast_resize {
	margin-top: 100px;
}

@media only screen and (orientation : landscape) {
	html {
		background-color: #444;
		background-image: url("https://dl.dropboxusercontent.com/u/115270/splash_h.jpg");
	}
	.toast {
		display: none;
	}
	#toast_landscape {
		display: block;
	}
}

@media only screen and (orientation : portrait) {
	html {
		background-color: #444;
		background-image: url("https://dl.dropboxusercontent.com/u/115270/splash_v.jpg");
	}
	.toast {
		display: none;
	}
	#toast_portrait {
		display: block;
	}
}

dabblet.html

<div id="toast_resize" class="toast">Resize your window.</div>
<div id="toast_portrait" class="toast hidden">Portrait Splash</div>
<div id="toast_landscape" class="toast hidden">Landscape Splash</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}