Changing Images

Written by Danny • 02.08.2025

#html #css #changing

Have you ever wondered "How do I display multiple header images"? Maybe you have more than one and don't know how to show them to everyone? That's (not exactly) what Anon asked in our wishlist (Hi Anon!) but I hope this tutorial is an option for you as well!

1️⃣ Have your images ready:
Create a folder (in my example I use images/) and upload your headers into them!

2️⃣ CSS:
Copy and paste this into your <style>-Tag (or .css file). Don't forget to edit the image names and how many you have!

.images {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
  animation: header 16s infinite;
}

@keyframes header {
  0%   { background-image: url("images/header.png"); }
  25%  { background-image: url("images/header2.png"); }
  50%  { background-image: url("images/header3.png"); }
  75%  { background-image: url("images/header4.png"); }
  100% { background-image: url("images/header5.png"); }
}

3️⃣ HTML:
Insert this somewhere in your Design where your Header-Image would normally appear.

<div class="images"></div>

4️⃣ Full Example:

<!doctype html>
<html>
<head>
<title>Random Header</title>
<meta charset="utf-8">
<link rel="icon" href="https://designfreaks.net/placeholder/100x100?bgcolor=83160D&txtcolor=F8F9FB&text=o&fontsize=50" type="image/png">

<style>
* {
	border:0;
	outline:0;
	margin:0;
	padding:0;
	box-sizing:border-box;
	transition:.15s;
}

body {
	color:black;
	font-family:arial;
	font-size:14px;
	background:#333;
}

main {
	margin:50px auto;
	width:900px;
	padding:20px;
	background:#fffaf7;
}

.images {
	width: 100%;
	height: 300px;
	background-size: cover;
	background-position: center;
	animation: header 16s infinite;
}

@keyframes header {
	0%   { background-image: url(header.png); }
	25%  { background-image: url(header2.png); }
	50%  { background-image: url(header3.png); }
	75%  { background-image: url(header4.png); }
	100% { background-image: url(header5.png); }
}

.content { }

</style>
</head>
<body>

<main>
	<div class="images"></div>

	<div class="content">
	</div>
</main>

</body>
</html>