CSSのbackground:urlにPHPの変数をつかう方法

Question

CSSのbackgroundでPHPの変数を使いたいのですが、うまく表示できません。
（画像がうつるはずの箇所が真っ白になります。）

もし、分かる方が入ればご教示いただけたらありがたいです。

現在記載しているCSSのコードです。
ーーーーー
background:url("<?=BASE_URL_IMAGE?>img/header.png");
ーーーーー

よろしくお願いします。

Comments

[takasima20]

BASE_URL_IMAGE の内容はどこで何を設定してるですか? で最終的に(cssの記述は)どういう内容になってますか?

[akkkkin]

質問ありがとうございます.
＞BASE_URL_IMAGE の内容はどこで何を設定
config.phpで下記のように定義しています。
define("BASE_URL_IMAGE", "https://example.jp");

＞最終的に(cssの記述は)
.headline {
padding: 5px 0 5px 0;
background:url(<?=BASE_URL_IMAGE?>img/header.png);
width:100%;
height:35em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
とすることでBASE_URL_IMAGEで定義したURLがCSSに反映されるようにしたいです。

[shi_ue]

ここにはコードは書かず、質問を編集してください

Answer 1

CSSは、通常サーバー側ではただのテキストファイルと同等のものとして扱われますので、
普通にPHPの変数や処理を書いても出力されません。

方法としては、

・CSSのファイルの拡張子をPHPにして、PHPに処理をさせる
・サーバーの設定を書き換えてCSSファイルもPHPのパーサーを通して処理するようにする

のいずれかになるとは思います。

２番目の方法は、私もやったことはありませんが、やってみた人がいるようなので、以下のページを参考にしてみてください。
拡張子 CSSもJavaScriptもPHPで処理しちゃう話 - それマグで！

Comments

[akkkkin]

ありとうございます。

Answer 2

拡張子を.phpにしてますか？

Comments

[akkkkin]

cssの拡張子をphpにするのでしょうか？

[shi_ue]

BJCRobotさんの回答が詳しいですね。

[akkkkin]

ありとうございます。

Answer 3

shi_ueさんの補足的な内容になりますが…

まず、htmlやcss(もちろんphpのコードも)を全部ひっくるめて
同じファイルに書いてある必要があります。
そして、そのファイルの拡張子は .php であること。

つぎに .php がそのWebサーバーで実行できること。
さらに、該ファイルで定数を参照する前に
config.php を読み込んでいること。

とりあえず、これくらいを確認して
それでもだめな時はまたコメントください。

Comments

[akkkkin]

ありとうございます。

Answer 4

外部ファイルの*.cssはPHPを使えません

sassというCSSの拡張機能を使えば
CSSに変数を使えます

そちらを覚えたほうがいいと思います。

参考
http://www.tohoho-web.com/ex/sass.html#whatis
http://dotinstall.com/lessons/basic_sass

Comments

[akkkkin]

ありとうございます。