How to diplay a random picture as background in html?-CodePudding

I made a html page to trying to display a random picture as picture here is the index.html

<?php
session_start();
$png = array('png1.jpg', 'png2.jpeg', 'png3.jpg', 'png4.jpg');

$random = rand(0,3);
$picture = "$png[$random]";

?>


<!DOCTYPE HTML>
<html>  

<head>
<style>
body {
background: url(images/<?php echo $picture; ?>) no-repeat;
background-size: cover;
}
</style>
</head>
  
<body>
  
<form action="login.php" method="post">
Name: <input type="text" name="name"><br>
Password: <input type="text" name="password"><br>
<input type="submit">
</form>

</body>
</html>

I'm expecting it out put a random picture from $png array, but the only output is the "form" part. Plus there is no problem with the picture.

CodePudding user response：

Save your file from "index.html" to "index.php", which will run your code as you expected.

PHP files have the capabilities to read and display HTML codes, but HTML does not automatically parse php code.

If you want to use PHP variables inside the html file only means you need to enable some configurations with the help of .htaccess file.

CodePudding user response：

/* Some mistake in this code firstly convert file extension .html to .php if you are using rand() php function and support on  php file and also $picture = $png[$random] used without using string */

/* it working for me please try this below code */

<!DOCTYPE html>
<html>
<body>

<?php

$png = array('https://www.w3schools.com/images/img_upgrade_300.png', 'https://www.w3schools.com/images/img_mylearning_300.png', 'https://www.w3schools.com/images/img_fullaccess_300.png','https://www.elegantthemes.com/images/home/category-thumb-store.jpg');

$random = rand(0,3);
$picture = $png[$random];

?>

<style>
body {
background: url('<?php echo $png[$random]; ?>') no-repeat;
background-size: cover;
}
</style>

 
</body>
</html>

CodePudding user response：

The problem is sloved, there is no problem with the code. Just the problem with replit.com where I run it. can use vijay pancholi's code to run it on replit.com