Dynamic CSS with PHP

Question

I tryed to include a changeing background with an PHP CSS file but even if I try my web page is blank or the background is empty...

The server is based on Linux and is running PHP 7 and Apache 2.

index.php (Version 1)

<link rel="stylesheet" type="text/css" href="./css/background.php.css">

index.php (Version 2)

<body>
    <style>
        <?php
            include("./css/background.php.css");
        ?>
    </style>
</body>

background.php.css

<?php
    echo("
        @charset "utf-8";
        /* CSS Document */
    ");
    error_reporting(E_ALL);

    $choicer = rand(1, 9);

    if ($choicer == 1) {
        echo('
            body{
                background-color: #333;
                background-image: url("../imgs/bg$choicer.jpg");
                background-attachment: fixed;
                background-position: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        ');
    }
    else {
        if ($choicer == 2) {
            echo('
                body{
                    background-color: #333;
                    background-image: url("../imgs/bg$choicer.jpg");
                    background-attachment: fixed;
                    background-position: center;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            ');
        }
        else {
            if ($choicer == 3) {
                echo('
                    body{
                        background-color: #333;
                        background-image: url("../imgs/bg$choicer.jpg");
                        background-attachment: fixed;
                        background-position: center;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                ');
            }
            else {
                if ($choicer == 4) {
                    echo('
                        body{
                            background-color: #333;
                            background-image: url("../imgs/bg$choicer.jpg");
                            background-attachment: fixed;
                            background-position: center;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }
                    ');
                }
                else {
                    if ($choicer == 5) {
                        echo('
                            body{
                                background-color: #333;
                                background-image: url("../imgs/bg$choicer.jpg");
                                background-attachment: fixed;
                                background-position: center;
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }
                        ');
                    }
                    else {
                        if ($choicer == 6) {
                            echo('
                                body{
                                    background-color: #333;
                                    background-image: url("../imgs/bg$choicer.jpg");
                                    background-attachment: fixed;
                                    background-position: center;
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                }
                            ');
                        }
                        else {
                            if ($choicer == 7) {
                                echo('
                                    body{
                                        background-color: #333;
                                        background-image: url("../imgs/bg$choicer.jpg");
                                        background-attachment: fixed;
                                        background-position: center;
                                        background-size: 100% 100%;
                                        background-repeat: no-repeat;
                                    }
                                ');
                            }
                            else {
                                if ($choicer == 8) {
                                    echo('
                                        body{
                                            background-color: #333;
                                            background-image: url("../imgs/bg$choicer.jpg");
                                            background-attachment: fixed;
                                            background-position: center;
                                            background-size: 100% 100%;
                                            background-repeat: no-repeat;
                                        }
                                    ');
                                }
                                else {
                                    echo('
                                        body{
                                            background-color: #333;
                                            background-image: url("../imgs/bg$choicer.jpg");
                                            background-attachment: fixed;
                                            background-position: center;
                                            background-size: 100% 100%;
                                            background-repeat: no-repeat;
                                        }
                                    ');
                                }
                            }
                        }
                    }
                }
            }
        }
    }

?>

I hope some one can help me here with this problem.

Despite being ".php.css" your server is still going to be interpreting that file as a CSS file, not a PHP file unless you explicitly add ".css" to the list of files to be interpreted as php, either via php.ini, your virtual host file, or via .htaccess. Have you done this? — Scoots, Jun 11 '19 at 17:16
PHP can't/won't run in a CSS file unless the web server has been configured to treat CSS files as PHP which is not likely. Change it to just a PHP file and output the styling you need. — Dave, Jun 11 '19 at 17:17
`error_reporting(E_ALL);` needs to come **before** you echo anything out to screen. — Martin, Jun 11 '19 at 18:16
You have to be sure to set the correct response type of your file extension is going to be php — Ruan Mendes, Jun 12 '19 at 02:12
For what is worth, PHP won't interpolate variables in single quotes strings. You must use double quotes if you want to use a PHP variable within that string. — Pablo, Jun 12 '19 at 02:22

score 0 · Accepted Answer · answered Jun 12 '19 at 02:07

This can be done. I have done it many times and it does not require changing anything at the web server's level. The common mistake that people make is to believe that the file extension matter when loading a CSS file in an HTML page.

The tag is already telling the browser to load the file as CSS. Now if the browser tries to be smart about it and check the MIME type of the file, then you can set the proper header in your PHP file. I have done this several time with success. And here is an example that I have just tested in Chrome, Firefox and Safari.

<?php
// css.php

header("Content-type: text/css; charset: UTF-8");

echo <<<CSS

p {
  color: red;
}

body {
  font-size: 3em;
}

CSS;

In this example I am using the heredoc syntax to avoid fiddling too much with escaping quotes if needed. Besides, the code is more readable that way.

Notice that I am setting the content type and the charset of the file. This technique can be used to make PHP generate images (jpeg, png, etc.) or PDF, Excel, Word document. Your imagination and your knowledge of the format of the document that you need to generate are the limit.

The HTML files that will load this PHP generated CSS file could look like the following code...

<!-- index.html -->

<html>
<head>
    <title>CSS + PHP</title>
    <link rel="stylesheet" href="css.php">
    <body>
        <p>This is a paragraph</p>
    </body>
</head>
</html>

And to make this even better, you can have your CSS in a separate files. For instance, style.css and include that file from the css.php file.

<?php
// css.php

header("Content-type: text/css; charset: UTF-8");

print file_get_contents("style.css");

Dynamic CSS with PHP

1 Answers1

Linked