Random Image (PHP)

Written by Danny • 02.08.2025

#php #random

Have you ever wondered "How do I display random header images"? Maybe you have more than one and don't know how to show them to everyone? That's what Anon asked in our wishlist (Hi Anon!) and I hope this tutorial will help you!

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

2️⃣ PHP:
Copy and paste this right after your <body>-Tag. Don't forget to edit the image names and how many you have!

<?php
$headers = [
  "images/header.png",
  "images/header2.png",
  "images/header3.png",
  "images/header4.png"
];

$randomHeader = $headers[array_rand($headers)];
?>

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

<div style="width:100%; height:300px; background-image:url('<?= htmlspecialchars($randomHeader) ?>'); background-size:cover; background-position:center;"></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;
}
.content { }

</style>
</head>
<body>
<?php
$headers = [
	"images/header.png",
	"images/header2.png",
	"images/header3.png",
	"images/header4.png"
];

$randomHeader = $headers[array_rand($headers)];
?>

<main>
	<div style="width:100%; height:300px; background-image:url('<?= htmlspecialchars($randomHeader) ?>'); background-size:cover; background-position:center;"></div>


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

</body>
</html>