How to use PHP inside css file [duplicate]

20
votes

I have CSS file and I want to refer some image paths in that files in PHP varaible format. Then I refer that css file inside a html file. Following are my file

CSS file

<? header ("Content-type: text/css");?>
 body{ margin:0px; font:9px/11px "Tahoma", Arial, Helvetica, sans-serif; color:#010000; 
 background:#f3f6e1 url(<?php echo base_url().'public/';?>images/body_bg_1.gif) repeat-x 0 0}

HTML file

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/layout.css" media="screen"> 
</head>

Other things. Can you explain me how to do this ?

4
phphtmlcss
use link tag to load the css file. - nurakantech
Is it going to fix the problem? - Malintha
something like <link rel="stylesheet" type="text/css" href="<?php echo base_url().'/public/css/layout.css';?>" /> it may work - nurakantech
Also, you may be able to get away without using PHP and making use of the HTML <base href=""> tag + attribute. - Mark
SEARCH! This has been asked many times before, on Stack Overflow, and across the whole of the Internet. It’s not possible natively as PHP is a server-side language, and CSS is a client-side resource. PHP has been and done its job by the time any CSS is rendered. - Martin Bean

4 Answers

18
votes

If you're able to rename your CSS file "layout.php", there's no need for all of these workarounds:

Your layout.php file would look like:

<?php header("Content-type: text/css; charset: UTF-8"); ?>
body{ margin:0px; font:9px/11px "Tahoma", Arial, Helvetica, sans-serif; color:#010000; 
background:#f3f6e1 url(<?php echo base_url().'public/';?>images/body_bg_1.gif) repeat-x 0 0}

Your HTML files would look like:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/layout.php" media="screen"> 
</head>

This question is very similar: Include: css with php file extension?

2
votes

Perhaps the return value of base_url() does not end in the path separator.

With that in mind, try this:

@import url("<?php echo base_url().'/public/';?>css/layout.css");

(Notice the slash before "public")

  • Check the source of the page via your browser's "view source" or similar, and check if the path in the @import is correct

or

  • Use a request logger similar to Chrome's devtools' "network" tab to see what URL your browser is trying to load the imported CSS file from.

You also view the CSS via your browser to identify whether the contents are being correctly built. If you see <?php inside the response, you'll need to make Apache treat the CSS file as if it was PHP.

You can add something similar to the following into your .htaccess file:

<FilesMatch "\.css$">
    SetHandler application/x-httpd-php
    Header set Content-type "text/css"
</FilesMatch>

You should ensure that the "mod_headers" Apache module is enabled to allow the use of the Header directive.

Although, personally I would rename such dynamic stylesheets to have a .php.css extension. This will have no effect, but then Apache can be configured to only pass the dynamic stylesheets to the PHP preprocessor.

<FilesMatch "\.php\.css$">
    SetHandler application/x-httpd-php
    Header set Content-type "text/css"
</FilesMatch>
1
votes

I believe the problem is that a .css file isn't going to be interpreted as PHP and so your code in the file is not going to be executed. If you included it as a PHP file, your code should be executed and your values should be filled in.

[Edit] This does seem to be the way to do it, as noted by an answer someone linked to in a comment on the original post here.

1
votes

It's simple if you have a bit of knowledge of url rewriting.

Write a .htaccess file in your root directory, It would look something like:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^customized\.css$ css\_generator\.php [L]
</IfModule>

Now just create a file css_generator.php having content:

<?php header('Content-type: text/css; charset: UTF-8'); ?>
 body{ margin:0px; font:9px/11px "Tahoma", Arial, Helvetica, sans-serif; color:#010000; 
 background:#f3f6e1 url(<?php echo base_url().'public/';?>images/body_bg_1.gif) repeat-x 0 0}

Your html should look like:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="customized.css" media="screen"> 
</head>

Understanding what just happened.

  • On page load when your browser will load customized.css, it will be redirected to css_generator.php
  • the contents of css_generator.php will be also available as yoursite.com/customized.css

Hope this helps