running php within a css file

Question

I wish to run PHP within a css file. The reason for this is that I want to dynamically set the URL of a background image based upon whether the site is in development or production. i.e

<?php Header ("Content-type: text/css; charset=utf-8"); 

$baseUrl = $this->basePath();

if (defined('RUNNING_FROM_ROOT'))
{
    $baseUrl .= '/public';
}

?>

.readersSlidersOne {

    background: url("<?php echo $baseUrl ?>/Images/backGroundImages/side_wallet.png") scroll 0 0 transparent ;
}

the above if clause basically determines whether a full BASE URL SHOULD be used or just the /public

i am aware from this answer that the solution is to create a css file with a php ending- and to then place the code below at the top of the file:

Header ("Content-type: text/css; charset=utf-8");

i did try this and it does indeed create a CSS file with PHP tags (css.php).

However once I place actually php code within the file it stops working.

i.e

$baseUrl = $this->basePath();

Answer 1

what I normally do in this case, I add that specific css in on top of required page and change the value dynamically. this is if the css is very page specific

<?php
$path = 'http://www.example.com/image.jpg';
?>
<style>
.className{
 background: url(<?php echo $path; ?>);
}
</style>

OR if you want to put it in header include file, basically in one place for all files, add if else statement and add a $page variable on top of your page

<?php 
// define this before including the file contaiting $path
$page = 'index';   ?>
<?php
if($page == 'index'){
  $path = 'http://www.example.com/image01.jpg';
}elseif($page == 'contactus'){
  $path = 'http://www.example.com/image02.jpg';
}
?>

Answer 2

CSS files should be static and cacheable. You should not be dynamically generating CSS files through PHP.

• If the change needs to be made once between production and staging environments, then only do it once during your deployment phase (when uploading to the respective environment). Either use some sort of build/deploy script, a CSS pre-processor, or whatever else fits best. There's no need to do this on every single request through PHP.
• If you want to customise the look of a page based on dynamic values, place a <style> section in your HTML page which you're generating through PHP anyway (or apply style=".." attributes to affected elements directly); you can dynamically manipulate that through PHP all you want.

Answer 3

unless this file is included somewhere inside a class definition, $this-> is out of context. You will have to come up with another way to get the correct path.

Use:

$Livedomain = "mysite.com";
$Devdomain = "localhost/mydomain";
$baseUrl = strpos($Livedomain, $_SERVER['PHP_SELF']) === false ? $Devdomain : $Livedomain;

Also, you can send caching headers to prevent excessive requests and keep your page loading quickly..

$seconds_to_cache = (60 * 60 * 24 * 90); // 3 months-ish
$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";
header("Expires: $ts");
header("Pragma: cache");
header("Cache-Control: max-age=$seconds_to_cache");

Answer 4

You're on the right track - to run PHP code within a CSS file, you would make a *.php file and send a CSS header through it, like so:

myStyles.php

make sure you put no PHP code or whitespace before the Header()

<?php Header("Content-type: text/css; charset=utf-8"); ?>
<?php

    $wht = '#ffffff';   
    $blk = '#000000';

    // This line probably isn't working because $this is not defined
    $baseUrl = $this->basePath();

?>

div#id {
    background-color: <?php echo $blk; ?>;
    color: <?php echo $wht; ?>;
    background-image: url('<? echo $baseUrl; ?>/images/myimage.jpg');
}

With that being said, have you tried toying around with preprocessors like LESS or SASS, which can be used to do what i assume is a vast majority of what you're trying to accomplish?

Answer 5

This is just an idea.... isn´t easier for youto inject only the background image in the html? Ex:

// Somewhere in your html oh Head
<?php
 $image = 'http://www.tld.com/yourImage.jpg';
?>

<div id="myId" style="background-image:<? echo $image; ?>"></div>

Then you don´t need to do nothing in the essence of your CSS and this will save you loads of time!!!! :)