JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section1">
  <!-- Content here -->
</div>
<div class="section2">
  <!-- Content here -->
</div>

SCSS

.section1 {
  &:before {
    content: "";     
    background: url('http://lorempicsum.com/futurama/350/200/1') center center;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    filter: blur(5px);
  }

  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  height: 100%;
}

.section2 {
  padding: 50px 0;
  display: flex;
  flex-direction: row;
  flex: 1;
  background-color: #FF5D63;
  position: relative;
  
}