Bạch Vân Thành

WordPress alows use a custom background, when activating this on your theme, wordpress auto insert a stylesheet into head section look like this

<style type="text/css">
body { background-image: url('http://localhost/rico/wp-content/uploads/2010/11/sarah-shahi-31.jpg'); background-repeat: repeat; background-position: top center; background-attachment: scroll; }
</style>

If you want to stick background to a custom element such as a div element which only wraps content (don’t wrap header, footer) you can use add_cstom_background with a call back to our function to re-define stylesheet which inject into section!

<?php
add_custom_background('_axcoto_custom_background_cb');
function _axcoto_custom_background_cb() {
	$background = get_background_image();
	$color = get_background_color();
	if ( ! $background && ! $color )
		return;

	$style = $color ? "background-color: #$color;" : '';

	if ( $background ) {
		$image = " background-image: url('$background');";

		$repeat = get_theme_mod( 'background_repeat', 'repeat' );
		if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
			$repeat = 'repeat';
		$repeat = " background-repeat: $repeat;";

		$position = get_theme_mod( 'background_position_x', 'left' );
		if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
			$position = 'left';
		$position = " background-position: top $position;";

		$attachment = get_theme_mod( 'background_attachment', 'scroll' );
		if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
			$attachment = 'scroll';
		$attachment = " background-attachment: $attachment;";

		$style .= $image . $repeat . $position . $attachment;
	}
?>
<style type="text/css">
#element_id { <?php echo trim( $style ); ?> }
</style>
<?php
}

Please not to change code from line 4 to line 29! This is code to get background and all css property! You can name _axcoto_custom_background_cb anything you want! And you can use any css selector instead of #element_id to apply background to your specific element!

Tags: add_custom_background, custom background, custom background on div, wordpress

This entry was posted on Sunday, November 7th, 2010 at 11:28 am and is filed under DIY. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.