body { margin: 0; background-color: #000; /* Fallback while loading */ } </style> </head> <body> <div class="gif-background"> <img src="your-background-loop.gif" alt="Animated background"> </div> <div class="content"> <h1>Your Website Title</h1> <p>Look at that sweet, looping motion behind me.</p> </div> </body> </html>
But let’s be honest: Slapping a 50MB GIF onto a background can destroy your browser tab. full screen animated gif background
Don’t do it on mobile. Use a @media query to swap the GIF for a static fallback image on slow connections or small screens. body { margin: 0; background-color: #000; /* Fallback
full-screen-animated-gif-background