background.css:


/* =========================================================
   GLOBAL BACKGROUND
   ========================================================= */

html,
body {
  margin: 0;
  padding: 0;

  background-color: #000;

  color: #ddd;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


body {

  min-height: 120vh;

  background-image:
    linear-gradient(
      rgba(0, 0, 0, .78),
      rgba(0, 0, 0, .88)
    ),
    radial-gradient(
      ellipse at center,
      transparent 10%,
      rgba(0, 0, 0, .65) 75%,
      rgba(0, 0, 0, .95) 100%
    ),
    url("assets/background.jpg");

  background-size:
    cover,
    cover,
    cover;

  background-position:
    center,
    center,
    center;

  background-repeat:
    no-repeat;

  background-attachment:
    fixed,
    fixed,
    fixed;
}


/* =========================================================
   INDEX — BACKGROUND FADE IN
   ========================================================= */

/*
   Durante el intro ocultamos el background
   real del body.
*/

body.home-intro-page {

  background-image: none;

}


/*
   Esta capa contiene solamente el background.
*/

body.home-intro-page::before {

  content: "";

  position: fixed;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(0, 0, 0, .78),
      rgba(0, 0, 0, .88)
    ),
    radial-gradient(
      ellipse at center,
      transparent 10%,
      rgba(0, 0, 0, .65) 75%,
      rgba(0, 0, 0, .95) 100%
    ),
    url("assets/background.jpg");

  background-size:
    cover,
    cover,
    cover;

  background-position:
    center,
    center,
    center;

  background-repeat:
    no-repeat;

  opacity: 0;

  transition:
    opacity 2.5s ease;
}


/*
   Después del intro.
*/

body.home-intro-page.background-visible::before {

  opacity: 1;

}