Jul 29, 2017 · 1 min read
This is a newer method, still in draft but works on Safari and Chrome with Experimental Flag enabled. In case anyone is interested.
HTML:
<div class="background flex items-center justify-center">
<div class="login-container pa4 br1">
<!-- Content -->
</div>
</div>CSS:
/* Sets height too 100% so it will cover entire viewport */
html, body { height: 100%; }.background {
background-image: url('http://bit.ly/2gPLxZ4');
background-repeat: no-repeat;
background-size: cover;
height: 100%; /* takes 100% of body */
}.login-container {
backdrop-filter: blur(10px) saturate(200%); /* blur and saturate to boost colors like iOS */
background-color: rgba(255, 255, 255, 0.25);
max-width: 500px; /* demo only */
}/* Demo Styles */
.br1 { border-radius: 3px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.pa4 { padding: 4rem; }
Codepen: https://codepen.io/mattmischuk/pen/JyGPoq
The weird classes at the bottom are some utilities from Tachyons.io
