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?

Please don't do this.... You are not always going to maintain this piece of code and you are not always going to develop alone. That being an ugly solution means that it is not the only one, there is always a cleaner solution (like change the image when serving it from the server that will still be better). As for @Michael_B honestly, this needs to stop - please - have you looked at PHP after PHP3, seriously do so... — DaGhostman Dimitrov
– DaGhostman Dimitrov, Commented Dec 6, 2016 at 16:21
So you want the gradient to be the same, but the jpg to be random? Do you happen to be using Sass? — Dre
– Dre, Commented Dec 6, 2016 at 17:43
Exactly, but I am currently not using Sass, I really do need to get a handle on pre processed CSS. — Jesse Luke Orange
– Jesse Luke Orange, Commented Dec 7, 2016 at 9:39

Michael Benjamin · Accepted Answer · 2016-12-06 16:04:45Z

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.

answered Dec 6, 2016 at 16:04

Michael Benjamin

375k110 gold badges616 silver badges735 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jesse Luke Orange Over a year ago

So essentially it isn't necessarily bad to do something like this as long as the developer (me) can maintain it?

Michael Benjamin Over a year ago

Look under the hood of any major website (ctrl-u on windows). Things get pretty complex, and you can't even see the php. Think in terms of writing clean, valid and semantic code. If it can remain simple that's even better, but it's not essential.

Michael Benjamin Over a year ago

And to make your code easier to maintain use comments. Seriously, comment, comment, comment. Leaving explanations will make things so much easier when years from now you, or someone helping you, needs to review and revise.

Collectives™ on Stack Overflow

Using PHP with CSS

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related