<div>cool!</div>
html { /* just to show an image background */
height: 100%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/tiger_lily.jpg);
background-size: cover;
}
div {
/* essential styles,
* all that's needed to create the effect */
border: solid .5em #be4c39;
padding: .5em;
background: #e18728 content-box;
/* non-essential, just to prettify the thing */
margin: 0 auto;
width: 5em; height: 3em;
color: white;
font: 700 2em/3 comic sans ms, verdana, sans serif;
text-align: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.