-1

I am trying to randomize my hero image on the front page of my website but struggling to make it work. Here is my code. I was testing to see if I got an image to display but no image is displayed.

If I do this then it works and an image is displayed.

.hero-image {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("images/traffic.jpg");

}

But I am trying to randomize the image and found some code on the web which I was trying to make it work on my site but it doesn't seem to work. I see no image:

 <?php
  $bg = array('traffic.jpg', 'traffic.jpg', 'traffic.jpg', 'traffic.jpg', 'traffic.jpg','traffic.jpg', 'traffic.jpg' ); // array of filenames

$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TheWall</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">

<style type="text/css">
<!--
.hero-image{

 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/<?php echo$selectedBg; ?>);
}

In my body, my div looks like this:

<div class="hero-image">
<div class="hero-text">


</div>
</div>
maximdj
  • 315
  • 1
  • 12

2 Answers2

-1

Your snippet does not have a body, you have to follow this semantic structure

<html>
<head>
<style type="text/css">
.hero-image{
 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/<?php echo$selectedBg; ?>);
}
</style>
</head>
<body>
<!-- Everything in this section will be displayed-->
<div class="hero-image"></div> <!-- This block will have the style applied-->
</body>
</html>

EDIT: Added an example with your code, I spotted a <!-- at the beginning of your CSS which is the beginning of a comment block.

oktapodia
  • 1,695
  • 1
  • 15
  • 31
  • I thought I needed to put the css in the not the section. – maximdj Sep 29 '19 at 15:13
  • You can put the css into the header or the body (best practices is to put the css into the header), you have to apply this css to a block in your body afterward, post updated with an example – oktapodia Sep 29 '19 at 15:16
  • I have tried what you suggested but still its blank. I wonder if PHP code is not being executed? I'm running my site on IIS. – maximdj Sep 29 '19 at 15:25
  • Try to do a `var_dump($bg);` in your php code, if this one is displayed, then your php code is correctly executed – oktapodia Sep 29 '19 at 15:29
  • I put var_dump($bg); in the php section as you said. Nothing is displayed so i guess that means PHP isn't working. As i mentioned my site is running on IIS. – maximdj Sep 29 '19 at 15:30
  • Then the issue is coming from your IIS server, try to correctly configure PHP and it will work :) – oktapodia Sep 29 '19 at 15:31
-1

I enabled PHP on the IIS server and created an index.php page instead of index.html. Then it worked. Thanks for your help.

maximdj
  • 315
  • 1
  • 12