Einfaches Autoresize für die WordPress Hintergrundbild-Funktion

Mit WordPress 3.0 wurde die Möglichkeit im Theme geschaffen, dass der User einfach ein Hintergrundbild hochladen und nutzen können. Das Bild wird mittels CSS im Hintergrund positioniert. Damit ist es nicht ganz so einfach, dass die Möglichkeit des Autoresize schafft und der Hintergrund sich an die Größe des Browsers anpasst. Es gibt einige schöne Möglichkeiten für diese Anforderung, ich möchte kurz eine sehr einfache Möglichkeit mittels CSS aufzeigen, da so die Funktion von WordPress nicht angefasst werden muss.

Die folgende Syntax muss innerhalb des Stylesheet integriert werden. Dazu kann auch ein Child-Theme angelegt werden, wenn das Originaltheme nicht verändert werden sollte. Die Werte müssen mit !important versehen werden, da ansonsten die Werte von WordPress genutzt werden, das Überschreiben dieser Werte ist nicht anders möglich. Damit wird der Hintergrund immer an die Größe des Browsers angepasst – aber Achtung: dies ist nicht immer die optimale Lösung, da die Bilder dazu in der eigentlichen Größe verändert werden, heißt also, dass ein sehr schmaler Bildausschnitt das Bild extrem verzerrt. Der Beispielscreenshot ist da wenig empfindlich, da die Wolken dies vertragen können und trotzdem ein angenehmes Hintergrundbild liefern – im Gegensatz zum Standard, in dem das Bild wie in der Vorschau gekachelt wäre; bei anderen Bildern kann dies sehr unschön aussehen.

body {
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-attachment:fixed !important;
	-o-background-size: 100% 100%, auto !important;
	-moz-background-size: 100% 100%, auto !important;
	-webkit-background-size: 100% 100%, auto !important;
	background-size: 100% 100%, auto !important;
}

Das CSS ist nicht in allen Browsern nutzbar, siehe Übersicht, liefert daher nur in den aktuellen Browsern den erwarteten Effekt. Der Internet Explorer, Browser kann man ihn ja schlecht nennen, hat hiermit so seine Schwierigkeiten.

Eine Alternative ist es den Callback für die Funktion mitzugeben und eine eigene kleine Funktion in der functions.php abzulegen, die sich um das Ausgeben des CSS kümmert. Die folgende Funktion tut dies statisch, fragt also nur das Bild ab und nutzt die Werte aus dem Backend nicht.

function fb_header_callback() {
  
  $background = get_background_image();
  if ( !$background )
    return;

  if ( $background ) {
    $image = " background-image: url('$background');";
  
    $style  = 'background-repeat:no-repeat;';
    $style .= 'background-position:center center;';
    $style .= 'background-attachment:fixed;';
    $style .= '-o-background-size: 100% 100%, auto;';
    $style .= '-moz-background-size: 100% 100%, auto;';
    $style .= '-webkit-background-size: 100% 100%, auto;';
    $style .= 'background-size: 100% 100%, auto;';

    $style .= $image . $style;
  }
?>
<style type="text/css">
body { <?php echo trim( $style ); ?> }
</style>
<?php
}

Diese Funktion muss in der Funktion als Callback mitgeben, sie kann natürlich beliebig angepasst werden. In der functions.php des Themes sollte es, wenn es die Background-Image-Funktionalität schon gibt, die Funktion add_custom_background() geben. Dieser muss im ersten Parameter mit der neuen Funktion erweitert werden und nun wird der Standard-Callback von WordPress nicht mehr aufgerufen.

	// This theme allows users to set a custom background
	add_custom_background( 'fb_header_callback' );

Als Hinweis, der Style wird dann via Hook wp_head direkt im head ausgegeben, eher unschön – wie ich finde, und daher solltet ihr diese Formatierung wohl besser im Stylesheet ablegen, da sie eh statisch ist und nicht vom User angepasst werden kann. Ebenso ist wichtig das der Hook auch im Theme vorhanden ist, was aber auch für andere Plugins oder Funktionen wichtig ist.

Werte aus dem Backend nutzen

Als letzter kleiner Tipp für eure eigenen Anpassungen möchte ich noch zeigen, wie man die Werte aus dem Backend bekommt und nutzt.
Die Hintergrundfarbe der Optionen zum Hintergrundbild wird mit folgender Funktion zurück gegeben:

$color = get_background_color();

Das Bild bekommt via:

$background = get_background_image();

Und einzelne Einstellungen zum Style werden via get_theme_mod($name); abgefragt:
Der folgende kleine Schnipsel gibt die gesetzten Werte zum Theme zurück.

$mods = get_theme_mods();
var_dump($mods);

Dies könnte beispielsweise für das Standard Theme Tweny Ten wie folgt aussehen

string 'Twenty Ten' (length=10)

array
  'background_image' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_image_thumb' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_repeat' => string 'no-repeat' (length=9)
  'background_position_x' => string 'center' (length=6)
  'background_attachment' => string 'scroll' (length=6)
  'background_color' => string '' (length=0)

Aufgrund dieser Werte im Array kann man beispielsweise den Wert background_repeat holen,

$repeat = get_theme_mod( 'background_repeat' );

der in diesem Beispiel no-repeat zurück gibt.

Mit den anderen Werten kann man genauso verfahren; eine Menge an Spielraum und Möglichkeiten.
Zum den Themen CSS und Hintergrund findet man einen ausführlichen Artikel bei Chris: Perfect Full Page Background Image