Change fullscreen background images per post/page in wordpress? WordPress

julesphoto comments:

Hi, thanks for your solution, I have it loading the image in the bg but it doesn't resize to full screen. Any thoughts? Here is where I am testing:

http://www.jbjb.co.uk/wordpress/2010/08/i-like-tuna/

julesphoto comments:

I see that the images are being resized to 1000x666 pixels. The original is 1920x1280. Why is it being resized to 1000, the script should detect the browser size and resize accordingly.

rilwis comments:

Hi, I found that PHP cannot get window's width and height, so I modified the code above, using jQuery to make it work:

Replace the code above with this code (in functions.php file):

add_action('wp_print_styles', 'enqueue_jquery');

function enqueue_jquery() {
wp_enqueue_script('jquery');
}

add_action('wp_footer', '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);
$img_url = get_stylesheet_directory_uri() . '/timthumb.php?zc=1&src=' . $bg . '&w=';

if (empty($bg)) return;
?>
<script type="text/javascript">
jQuery(document).ready(function(){
var url = 'url(' + <?php echo "'" . $img_url . "'"; ?> + window.screen.availWidth + '&h=' + window.screen.availHeight + ') fixed no-repeat';
jQuery('body').css('background', url);
});
</script>
<?php
}

rilwis comments:

One more important thing: TimThumb by default set the maximum width and height to 1000 pixels. To change this limit, open timthumb.php file, at the beginning, change 1000 to bigger number in these lines:

define ('MAX_WIDTH', 1000); // maximum image width
define ('MAX_HEIGHT', 1000); // maximum image height

julesphoto comments:

Nick thanks for your input. When I try your code it no longer displays the bg image. What I am ideally looking for is that the script not only detects the browser size and so timthumb resizes the image but also that if the user resizes the browser the image also resizes either with jquery or css.

Nick Parsons comments:

Hmm, I'm not sure why that would cause the background image not to display. To resize the image when the browser is resized, you could set up something like this (in between the script tags in the modified insert_post_bg function):


jQuery(function(){
jQuery("body").css('background-image','url(<?php echo get_stylesheet_directory_uri(); ?>/timthumb.php?w=' +jQuery(window).width()+ '&zc=1&src=<?php echo $bg; ?>)');
jQuery(window).resize(function(){
jQuery("body").css('background-image','url(<?php echo get_stylesheet_directory_uri(); ?>/timthumb.php?w=' +jQuery(window).width()+ '&zc=1&src=<?php echo $bg; ?>)');
});
});


If you can try that, I'll take a look and tell you why the background isn't displaying.

Nick Parsons comments:

Jermaine's suggesting is really good, to prevent the distortion modify it like this:


<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% auto;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}
</style>


julesphoto comments:

Thanks Jermaine for your input. The problem with the css resizing of the image is that it alters/distorts the image proportions. Is there a way around this issue?

Jermaine Oppong comments:

try this change. I've altered the CSS based on Nick Parsons input:




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%, auto;
-moz-background-size: 100%, auto;
-webkit-background-size: 100%, auto;
background-size: 100%, auto;
}

</style>

<script type="text/javascript">

$(document).ready(function() {

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

$("img.bg-resize").css({'width': $winwidth , 'position':'relative' , 'z-index':'0'});

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

}

}


Jermaine Oppong comments:

Sorry change CSS part to this;



<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% auto;

-moz-background-size: 100% auto;

-webkit-background-size: 100% auto;

background-size: 100% auto;

}

</style>


This should sort out resizing issue as Nick Parsons illustrated

Jermaine Oppong comments:

@Pippin ... The <strong>Customs Background Plugin</strong> does not allow rescaling of background images.