Background image won't display 100% if it is generated at random - php

Question

I am making a website that has two background images, one of them is always the same i.e.:
background-image: url("../images/centre-image.jpg");
and the other is generated via php to show a background image at random:
<?php
$bg = array('large-top1.jpg', 'large-top2.jpg', 'large-top3.jpg', 'large-top4.jpg', 'large-top5.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
?>
<img src="images/background-images/<?php echo $selectedBg; ?>" class="bg">
Making the first background the full size of the DIV no matter what size of the screen was easy enough:
div.centre-options {
background-size: 100% auto;
}
however if I try to add similar CSS to the random generated image it doesn't work (just shows it at its full jpg size and then repeats) and not sure show to solve the problem.

Answer 1

As far as i can tell the image generated isn't set as a background but as a image to display, therefore you can't apply background styling to it.
There is 2 things you can do either apply styling directly to the image tag i.e.
img.bg{
width:100%;
height:100%;
}
or alternatively create an element and add the generated image to it's styling
would look somthing like this:
<?php
$bg = array('large-top1.jpg', 'large-top2.jpg', 'large-top3.jpg', 'large-top4.jpg', 'large-top5.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
?>
<style>
div.bg{
background-image: url("images/background-images/<?php echo $selectedBg; ?>");
background-size: 100% auto;
}
</style>
<div class="bg"></div>
Preferable put the styling between the head tags