Changing Images

Written by Danny

02.08.2025

#html #css #changing

Intro
Have your images ready
CSS
HTML
Full Example

1 Intro

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!

2 Have your images ready

Create a folder (in my example I use images/) and upload your headers into them!

3 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"); }
}

4 HTML

Insert this somewhere in your Design where your Header-Image would normally appear.

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

5 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>