<div id="fullBackground">
</div>

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#fullBackground {
  transition: opacity 1s ease-in-out;
  width: 100%;
  height: 100vh;

  opacity: 0.3;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#fullBackground.background__loaded {
  opacity: 1;
  background-image: url("https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?crop=entropy&dpr=2&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450");
}

body {
  width: 100%;
  height: 100%;

  transition: all 1s ease-in-out;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjUyOCI+PHBhdGggZmlsbD0iIzUzNDAzMSIgZD0iTTAgMGgxMDI0djUyOEgweiIvPjxnIGZpbGwtb3BhY2l0eT0iLjUwMiI+PHBhdGggZmlsbD0iI2ZmZGFiMiIgZD0iTTI1OCA0OTRMNTQ2IDUwbDM1MiAzODB6Ii8+PHBhdGggZD0iTTU0Ni02MkwtNjIgMTBsODggNTgwek02MTAgNTU4bDQyMCA0VjMxNHoiLz48cGF0aCBmaWxsPSIjMDAwMDA2IiBkPSJNMTA4NiA2TDU5MC0yNmw0ODggMzMyeiIvPjxwYXRoIGQ9Ik00ODYgNTUwbC01MjQgMjQgMTYtMjk2eiIvPjxwYXRoIGZpbGw9IiM5ZmJkOTgiIGQ9Ik05MjYgMzc4TDgxNCAxMzQgNTIyIDUxOHoiLz48cGF0aCBmaWxsPSIjZjQ5YTcwIiBkPSJNNzEwIDQ4NmwtNTA0LTYwIDI5Mi0zMjB6Ii8+PHBhdGggZmlsbD0iIzkzNGMwMCIgZD0iTTM1NCA1MTBMOTQgMzU4bDI2NC0yMzJ6Ii8+PHBhdGggZmlsbD0iIzQ3NDI1ZiIgZD0iTTYxOCAyNTRsNDY4IDhMNDQyLTYyeiIvPjxwYXRoIGQ9Ik00NDItMzhMLTYyIDQxMFYtMjZ6TTEwMzAgNTkwbDIwLTMyMC0zMjQgMjY4eiIvPjxwYXRoIGZpbGw9IiNkOGI3ODUiIGQ9Ik00NjYgMjMwbC01NiAyNzIgMzc2LTQ0eiIvPjxwYXRoIGQ9Ik01MjIgMzg2bDQgMjA0aC02NHoiLz48cGF0aCBmaWxsPSIjMDAwNDBiIiBkPSJNMTAzNCAzMzRMNzM0LTYyaDM0MHoiLz48cGF0aCBkPSJNMTA4NiAzNjJMMzU4IDU5MGw3MTItNHoiLz48cGF0aCBkPSJNLTIgNTQ2bDQzNiA0MC00OTYtMzc2eiIvPjxwYXRoIGZpbGw9IiMyNjYwNjAiIGQ9Ik05MzQgMzk0bDY0LTIwOEw3MzQgNTR6Ii8+PHBhdGggZmlsbD0iIzk2NTI2NiIgZD0iTTMxMCAyNzBsNDcyLTE2TDU4MiAyMnoiLz48cGF0aCBmaWxsPSIjZmZiMDhlIiBkPSJNNTE4IDEzMGwtMTYgMzg0LTE0OC05NnoiLz48cGF0aCBmaWxsPSIjNDAxNjA1IiBkPSJNMTAyIDE2Nkw2NjItNjIgNjYgNDAyeiIvPjxwYXRoIGZpbGw9IiNjZDgxMDAiIGQ9Ik01MTggNDk4TDIzMCAzNTRsMTMyIDE0MHoiLz48cGF0aCBmaWxsPSIjNmY4YjdiIiBkPSJNODMwIDQ1MGwxMjgtMTc2LTMwMC0xMDB6Ii8+PHBhdGggZmlsbD0iIzYwM2EwMCIgZD0iTTMwNiA0OTRMMTk0IDIxMGwtODggMTgweiIvPjxwYXRoIGQ9Ik0zODYtNjJMLTYyIDMyNmwxMi0zNDR6TTQzMCA1MjZsNDYwIDY0LTE1Mi0xMDR6Ii8+PHBhdGggZmlsbD0iIzAwMDAwMSIgZD0iTTEwODYgMTk0TDU3OC02Mmg0ODR6Ii8+PHBhdGggZmlsbD0iIzY1MjgzNCIgZD0iTTY5OC02MkwyOTQgMTcwbDU2IDExNnoiLz48cGF0aCBmaWxsPSIjNzc4ZTU5IiBkPSJNNzE0IDQ5MGwyMDQtMTA0LTU2LTU2eiIvPjxwYXRoIGZpbGw9IiNmNGEwNGYiIGQ9Ik00NTQgNDc4bC0xMzItNDQgMjQtMTIweiIvPjxwYXRoIGZpbGw9IiMyNDFkMmQiIGQ9Ik04MjYgMTY2bDY4LTEwMEw0NTgtNjJ6Ii8+PHBhdGggZD0iTTUxNCA1MThsLTEyLTEwNCAyOCA4ek0xOCAzOThsNjEyIDE5Mi02OTItOHoiLz48cGF0aCBmaWxsPSIjZGY4OWJlIiBkPSJNNDg2IDE2NmwtMjAgMTU2IDkyLTIwOHoiLz48cGF0aCBmaWxsPSIjYzlhMzQ4IiBkPSJNNjk0IDQ2NmwtMTY0IDQwLTQtODB6Ii8+PHBhdGggZmlsbD0iI2ZmZDhiNSIgZD0iTTQ3NCAzMjJsMzIgOTYtMTA0IDQweiIvPjxwYXRoIGQ9Ik0xMDg2IDE5OEw4MTQgNTM0bDIyMCA1NnoiLz48cGF0aCBmaWxsPSIjYmU5MThjIiBkPSJNNjQyIDI5OEw0OTQgNDIybDg4LTI2MHoiLz48cGF0aCBmaWxsPSIjNWQzZTAwIiBkPSJNNTA2IDUwMmwtMjQ0LTQ4IDIxMiAxMTJ6Ii8+PHBhdGggZmlsbD0iI2IzYWU4NCIgZD0iTTg2MiAzMzRsLTMxNi0yMCAxNTIgMTc2eiIvPjxwYXRoIGZpbGw9IiMwMTIyMjciIGQ9Ik03MzggMTBsMjUyIDEyNCA5NiAxODR6Ii8+PHBhdGggZmlsbD0iIzIxMDQwOSIgZD0iTTQ2NiA3OEwxMzQgOTAgNjE0LTYyeiIvPjxwYXRoIGZpbGw9IiM1YTUzNTAiIGQ9Ik02NzAgMjI2bDE2OC01Mi0yNTYtNzZ6Ii8+PHBhdGggZD0iTTEwMzggMzQyTDczOCA0ODJsMjc2IDEwOHoiLz48cGF0aCBmaWxsPSIjOGM4ZTgzIiBkPSJNODcwIDM4NmwtNjAtMTQ0LTI1NiA4eiIvPjxwYXRoIGZpbGw9IiNhNDYwM2EiIGQ9Ik0zMDYgMjc0bC0xNiAxNjQgMTg0LTI2MHoiLz48cGF0aCBmaWxsPSIjY2E3NTc1IiBkPSJNMzc0IDI5NGw4NC01MiAyOCAxMDB6Ii8+PHBhdGggZmlsbD0iIzliNjEwMCIgZD0iTTIxOCAzMThsMTU2IDE2OC0xMTYtNDR6Ii8+PHBhdGggZmlsbD0iI2U2YTlhMSIgZD0iTTUzOCA0MzBsLTY4LTE1NiA5MiA4eiIvPjxwYXRoIGZpbGw9IiM1NjJhMzIiIGQ9Ik03MzAgMTIyTDU5NC0xNGw4IDEzMnoiLz48cGF0aCBmaWxsPSIjMjI0NzQ0IiBkPSJNOTU0IDM1OGwtNzItMjQwIDE0MCAxNDh6Ii8+PC9nPjwvc3ZnPg==");
}

const imageSrc = `https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?crop=entropy&dpr=2&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450`;
// const imageURL = `url(${imageSrc})`;
const body = document.body;
const background = document.querySelector("#fullBackground");

// Approximate jQuery's document.ready(...) equivalent
// https://stackoverflow.com/a/21814964/4035
document.addEventListener("DOMContentLoaded", function() {
  let image = new Image();
  image.src = imageSrc;

  image.onload = loadBackgroundImage;
});

const loadBackgroundImage = () => {
  background.classList.add("background__loaded");
};