.background { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: var(--z-index-background); animation: appear var(--animation-speed-slow) 1; } .background-image { background-image: var(--background-image); background-attachment: fixed; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: block; opacity: var(--background-opacity); /* filter: blur(var(--background-blur)) grayscale(var(--background-grayscale)); */ } .background-accent { background-color: rgba(var(--accent), var(--background-accent-opacity)); position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: block; } @keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } }