<?php
if(!function_exists('page_filename'))
{
include_once(WB_PATH.'/framework/functions.php');
}

$header_image = page_filename(MENU_TITLE).'.jpg';
$header_image = file_exists(WB_PATH.'/templates/'.DEFAULT_TEMPLATE.'/header/'.$header_image)
    ? TEMPLATE_DIR.'/header/'.$header_image
    : TEMPLATE_DIR.'/header/yaml_bg.png';

?>

Diese Anweisung binden wir im Head unseres Template ein. Jetzt erstellen wir noch eine globale Javascript Variable, die wir direkt darunter setzen.

<script language="JavaScript" type="text/javascript">
var header_background = "<?php print $header_image; ?>";
</script>

Jetzt brauchen wir JQuery nur noch beizubringen was es machen soll.

    $('#header').css(
    {
      'background-image' : 'url(' + header_background + ')',
      'color': '#fffffd'
    });

Eine Änderung oder Anpassen der erstellten CSS Dateien ist nicht unbedingt erforderlich.

Es dürften da noch mehr Alternativen geben, um Dynamisches CSS zu verwirklichen. Unsere Vorstellungen wäre es ein Modul zu entwickeln, die mehr an Anfänger gerichtet ist.