Best way to add background image with css3 filters

Answer 1

Add the image using pseudo element, like this, and you can have other content floating on top.

If you get issues with the z-index: -1;, which keep the image to stay in the background, you can remove it and give immediate children of the body position: relative instead.

body {
  margin: 0;
  font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: #151626;
  height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  height: 100%;
  width: 100%;
  background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
  background-size: cover;
  transform: scale(1.05);
  filter: blur(10px);
  opacity: 0.5;
  z-index: -1;
}

div {
  color: white;
  font-size: 30px;
}

Hey there....