<div>cool!</div>
html {
	height: 100%;
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/tiger_lily.jpg);
	background-size: cover;
}

div {
	/* RELEVANT STYLES */
	border: solid .5em #be4c39;
	padding: .5em;
	background: #e18728 content-box;
	
	/* other styles */
	margin: 0 auto;
	width: 5em; height: 3em;
	color: white;
	font: 700 2em/3 comic sans ms, verdana, sans serif;
	text-align: center;
	
	/* give the whole thing a yellowish glow */
	/* please don't use -ms- or -moz- prefixes
	 * for CSS filters, both Firefox & Edge 
	 * implemented CSS filters unprefixed 
	 * and IE doesn't support them at all
	 */
	-webkit-filter: drop-shadow(1px 2px 2px #d49b00);
	filter: drop-shadow(1px 2px 2px #d49b00);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.