Random Image (PHP)

Written by Danny

02.08.2025

#php #random

Intro
Have your images ready
The PHP Code
Add some HTML
Full Example

1 Intro

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!

2 Have your images ready

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

3 The PHP Code

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)];
?>

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

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;
}
.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>