Horje
Change fullscreen background images per post/page in wordpress? - Wordpress Solution
[Solved] - Change fullscreen background images per post/page in wordpress? - Wordpress Solution
Try following codes
I have been trying to implement the following tutorial in my wordpress install: http://wpshout.com/wordpress-custom-post-backgrounds/ a successful install should yield the following results: http://www.nometet.com/reviews/singularity/ where the background is changed relative to the post/page. I cannot get it to work and was wondering if someone could help or if there's is someone out there who has an even better alternative of doing this technique. The timthumb resizes the image but based on what? Does it detect the users browser resolution? Also with the inclusion of the new custom background feature in wordpress 3 if I have a default background installed will the above method over ride the default bg?

Solution - 1

First, you need to download [[LINK href="http://code.google.com/p/timthumb/"]]TimThumb [[/LINK]], and put it into your theme folder. We use it to resize picture. Add the following code to functions.php:

add_action('wp_head', 'insert_post_bg');

function insert_post_bg() {
	if (!is_single()) return;
	
	global $post;

	$bg = get_post_meta($post->ID, 'background', true);
	$bg = str_replace(get_bloginfo('url'), '', $bg);
	if (!empty($bg)) {
	?>
		<style type="text/css" media="screen">
		body{background: url(<?php echo get_stylesheet_directory_uri(); ?>/timthumb.php?w=1920&zc=1&src=<?php echo $bg; ?>) fixed no-repeat;}
		</style>
	<?php 
	}
}
When you create a new post, add custom field "background" with URL is the URL of the background image. You can use WP image uploader to upload background, and grap its URL. You can paste direct URL (with http://) or relative URL as well. Change "w" (width) parameter of timthumb to fit your requirement (in this line):
body{background: url(<?php echo get_stylesheet_directory_uri(); ?>/timthumb.php?w=1920&zc=1&src=<?php echo $bg; ?>) fixed no-repeat;}


Solution - 2

The PHP code that Rilwis and Oleg gave you is great, but you'll need to use Javascript to resize the image to fit the browser window (since PHP is server side and has no way to get the window size). Edit Rilwis' insert_post_bg function like this:


function insert_post_bg() {
	if (!is_single()) return;

	global $post;

	$bg = get_post_meta($post->ID, 'background', true);
	$bg = str_replace(get_bloginfo('url'), '', $bg);
	if (!empty($bg)) {
	?>
		<style type="text/css" media="screen">
		body{background: url(<?php echo get_stylesheet_directory_uri(); ?>/timthumb.php?w=1920&zc=1&src=<?php echo $bg; ?>) fixed no-repeat;}
		</style>
		<script type="text/javascript">
		jQuery(function(){
			jQuery("body").css('background-image','url(<?php echo get_stylesheet_directory_uri(); ?>/timthumb.php?w=' +screen.width+ '&zc=1&q=90&src=<?php echo $bg; ?>)');
		});
		</script>
	<?php 
	}
}


Solution - 3

You can use CSS3 attributes to resize background images. Then use a jQuery fix for browsers that dont support CSS3 attributes, i.e. Internet Explorer 8 and below




function insert_post_bg() {

	if (!is_single()) return;

	global $post;

	$bg = get_post_meta($post->ID, 'background', true);

	if (!empty($bg)) {

	?>

		<style type="text/css" media="screen">

		body{background: url(<?php echo $bg; ?>);
                        background-repeat:no-repeat;
                        background-position:center center;
                        background-attachment:fixed;
                        -o-background-size: 100% 100%, auto;
                        -moz-background-size: 100% 100%, auto;
                        -webkit-background-size: 100% 100%, auto;
                        background-size: 100% 100%, auto;
                       }

		</style>

		<script type="text/javascript">

		$(document).ready(function() {
                
                $("body").append('<img class="bg-resize" src="<?php echo $bg; ?>" />');
                $("img.bg-resize").hide();

		var $winwidth = $(window).width();
		$("img.bg-resize").attr({
			width: $winwidth
		});
		$(window).bind("resize", function(){
			var $winwidth = $(window).width();
			$("img.bg-resize").attr({
				width: $winwidth
			});
		 });

	        });

		</script>

	<?php 

	}

}


Solution - 4

1) enable featured iamge for page and post (paste this code into functions.php) add_theme_support( 'post-thumbnails' ); add_theme_support( 'post-thumbnails', array( 'post' ) ); add_theme_support( 'post-thumbnails', array( 'page' ) );


Solution - 5

A way simpler way to do all of this: [[LINK href="http://codecanyon.net/item/custom-backgrounds-for-wordpress/121983?ref=mordauk"]]Custom Backgrounds Plugin from Code Canyon[[/LINK]]

Date: 2022-10-21 05:19:59
Category: Wordpress
More for You