Matt Mischuk
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

Matt Mischuk

Written by

I’m a dad of two beautiful girls, build wacky 1980s sites @ Rangle

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade