autoresize-settings

Simple Autoresize for WordPress Background Image Function


In WordPress 3.0 you have the possibility to easily upload and use a background image. The image is positioned via CSS in the background. Thus it is not quite simple to have the possibility of auto resize and the background adapts to the size of the browser. There are some nice possibilities for this request, I will briefly highlight a very simple way of using CSS, since then the function of WordPress will not be effected.


The following syntax must be integrated within the stylesheet. You can also create a Childtheme when the original theme should not be changed. The values have to be provided with !important since otherwise the values of WordPress will be used. So that the background is always adjusted to the size of the browser - but beware: this is not always the best solution because the images are going to change from the actual size. So it can look very distorting. The sample screenshot is as little sensitive as the clouds tolerate this and still provide a nice background picture - in contrast to the standard in which the image in the preview would be tiled, and for other images may look very ugly.

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;
}

This CSS is not usable in all browsers, see overview , therefore it provides only in newer browsers the expected effect. The Internet Explorer has it difficulties with it.

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
}

This function must be given to the function as a callback, of course it can be adjusted. In the functions.php of the theme it should work if the background image functionality already exists, the function add_custom_background(). This needs to be expanded in the first parameter with the new function and now the default callback of WordPress will no longer be called.

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

The style will then output via hook wp_head directly in head, rather ugly - I think, and therefore you should format it in the style sheet, since it is static anyway and can not be adjusted by the user. Equally important is, that the hook is also present in the Theme, which is also important for other Plugins or features.

Use values from the backend

The last little tip for your own adjustments. I want to show you how to get the values from the backend and use them.
The background color of the wallpaper options will be given back with the following function:

$color = get_background_color();

The image gets via:

$background = get_background_image();

And query individual settings for the style via get_theme_mod($name);:
The following little snippet gives the set values back to the Theme.

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

For the default Theme Twenty Ten it could look like this:

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)

Based on these values in the array you can, for example, get the value background_repeat,

$repeat = get_theme_mod( 'background_repeat' );

which gives in this example no-repeat back.

The other values can be treated similarly, a lot of possibilities and opportunities.

Comments are closed.

One comment

  1. John

    I'm having a issue making the background color work.

    Could you please point out what is wrong with my code?

    add_custom_background( 'fb_header_callback' );

    function fb_header_callback() {
    $background = get_background_image();
    $color = get_background_color();
    if ( ! $background )
    return;
    if ( $background ) {
    $image = " background-image: url('$background');";
    $style .= 'background-color: $color;';
    $style = 'background-repeat:no-repeat;';
    $style .= 'background-position:center top;';
    $style .= 'height:100%;';
    $style .= 'margin: 0 auto;';
    $style .= 'background-attachment: fixed;';
    $style .= $image . $style;
    }