Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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

  • SOLVED

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?

Answers (5)

2010-11-01

rilwis answers:

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


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

2010-11-01

Nick Parsons answers:

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




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>

2010-11-01

Jermaine Oppong answers:

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



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

}

}



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.

2010-11-01

Oleg Butuzov answers:

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' ) );


Oleg Butuzov comments:

this code shoudl be places in header.php might be...
unfortunatly i don't know the location of the code... that show the thumb

<?php

if (is_page() || is_single()){
$thumbUrl = wp_get_attachment_image_src(
get_post_meta( get_the_ID(), '_thumbnail_id', true) ,
'original',
false);
}


if (isset($thumbUrl) && is_array($thumbUrl) && count($thumbUrl) > 3 ){
echo '
<style type="text/css">
body, #page{background: url(http://www.nometet.com/wp-content/themes/elemental/tools/timthumb.php?w=1920&zc=1&src=<?php echo array_shift($thumbUrl);?>) center no-repeat fixed;}
// </style>
';
} else {
// your current conditions
// that genreate this
// <style type="text/css">
// body, #page{background: url(http://www.nometet.com/wp-content/themes/elemental/tools/timthumb.php?w=1920&zc=1&src=http%3A%2F%2Fwww.nometet.com%2Fwp-content%2Fuploads%2F2010%2F07%2F4300_08_070109001_0013_ra.jpg) center no-repeat fixed;}
// </style>
//

}

?>


Oleg Butuzov comments:

ask me at skype if you have any questions


julesphoto comments:

Oleg I am trying to implement your idea and am testing it in the wordpress default twentyten theme.

I am testing is here and can see the featured image is being loaded into the wrong container and not being applied to the background.

Am I pasting the code in the wrong place?


julesphoto comments:

Sorry forgot the link:

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


Oleg Butuzov comments:

–£eah. your obiously need to instal timthumb.php to your theme.
http://code.google.com/p/timthumb/


julesphoto comments:

I already have timthumb installed and have updated your script with the url:

<?php



if (is_page() || is_single()){

$thumbUrl = wp_get_attachment_image_src(

get_post_meta( get_the_ID(), '_thumbnail_id', true) ,

'original',

false);

}





if (isset($thumbUrl) && is_array($thumbUrl) && count($thumbUrl) > 3 ){

echo '

<style type="text/css">

body, #page{background: url(http://www.jbjb.co.uk/wordpress/wp-content/themes/twentyten/scripts/timthumb.php?w=1920&zc=1&src=<?php echo array_shift($thumbUrl);?>) center no-repeat fixed;}

// </style>

';

} else {

// your current conditions

// that genreate this

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

// body, #page{background: url(http://www.jbjb.co.uk/wordpress/wp-content/themes/twentyten/scripts/timthumb.php?w=1920&zc=1&src=http%3A%2F%2Fwww.nometet.com%2Fwp-content%2Fuploads%2F2010%2F07%2F4300_08_070109001_0013_ra.jpg) center no-repeat fixed;}

// </style>

//



}



?>

Where should I place this code?


Oleg Butuzov comments:

skype me, i wil do that faster and better.

2010-11-01

Pippin Williamson answers:

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]]