How do i run PHP inside CSS

i have a stylesheet link like so

<link href="css/<? echo $theme;?>/styles.css" rel="stylesheet" type="text/css" />

Inside the CSS I want to be able to echo a background image outputted by the db

body{ background-image:url(../../images/<?php echo $theme.'/'.$background;?>);}

I tried adding the following to the beginning of my page but it just output everything in html code

<? header ("Content-type: text/css");?>

Im sure there is a bit to this, can anyone advise the best course of action?

Thanks in advance

Solution 1:

Change the file ending to php so it gets run by the server, and once you've done that you can link to it as if it was a regular css file and make sure the header is correct set with that header code you have at the top of the file

Change:

<link href="css/<? echo $theme;?>/styles.css" rel="stylesheet" type="text/css" />

To:

<link href="css/<? echo $theme;?>/styles.php" rel="stylesheet" type="text/css" />

and top of that file you have

<? header ("Content-type: text/css");?>

And btw since you seem to have php shorttags already enabled you might aswell use instead of using

<? echo $var;?>

Use

<?=$var;?>

Solution 2:

Here is a Way: Use that part of the CSS inside the HTML file. Use double quotes " " and write the PHP file inside it. Here is an example to use PHP inside CSS file.

This CSS is in the HTML file and this code is working fine on my project. Let me know if any issue will test it.

<style type="text/css">

        @media screen and (max-width: 650px) {
            .benifit {
                background-image:url("<?= $this->getBaseUrl() ?>/www/images/Capture.png") ;
                height:440px;
                border-radius: 5px 0px 0px 5px;
            }

        }
        @media screen and (min-width: 400px) {
            .benifit {

                width: 47%;
                background-image:url("<?= $this->getBaseUrl() ?>/www/images/Capture.png") ;
                height:440px;
                border-radius: 5px 0px 0px 5px;
            }
        }
        #ajax-loader {

            height:     100%;
            width:      100%;
            background: rgba( 255, 255, 255, .8 ) url("<?= $this->getBaseUrl() ?>/www/img/ajax-loader1.gif") 50% 50% no-repeat;
            overflow: hidden;
        }

    </style>