Using PHP with CSS

Question

As you can see I have some inline CSS to set gradients for different browser types, I'd like to put this in a CSS file...

The issue is, to generate the URL within the CSS background property I use a random number, generated using inline PHP.

This makes the page quite messy, is there a way to separate this out and achieve the same thing?

<div class="jumbotron hidden-xs hidden-sm " id="headerhome" style="background: -webkit-linear-gradient(rgba(166, 195, 206, 0.5), 
     rgba(166, 195, 206, 0.5)),
        linear-gradient(
        to bottom,
        rgba(64, 64, 64, 0) 70%,
        rgba(77, 78, 94, 0.5) 80%
    ), url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg');

        background: -o-linear-gradient(rgba(166, 195, 206, 0.5), 
     rgba(166, 195, 206, 0.5)),
        url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg');

        background: -moz-linear-gradient(rgba(166, 195, 206, 0.5), 
     rgba(166, 195, 206, 0.5)),
        url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg');

        background: -linear-gradient(rgba(166, 195, 206, 0.5), 
     rgba(166, 195, 206, 0.5)),
        url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg');

        background-blend-mode: multiply;">

Is it more worth going with the approach of having a style.php file?

Answer 1

This sort of integration with HTML is precisely what PHP is designed for, among other things.

Of course, this creates more complex ("messy") code, but that's not necessarily a bad thing. Indeed, complexity is the natural result of layering code.