<div class="container"> <h1 class="title">Black Everyday<br>Company</h1> </div>
.container { width: 100vw; height: 100vh; background: #666 url(https://bcrikko.github.io/web-design-practices/single-page-layout/asset/header.jpg) no-repeat; background-size: cover; position: relative; z-index: 0; } .container::before { content: ''; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px; background: inherit; filter: blur(5px); /* position:absoluteのせいで最前面に来てしまうため */ z-index: -1; } .title { color: white; text-align: center; font-size: 60px; padding-top: calc(100vh / 2 - 60px); text-shadow: 0 0 10px #333; }