The background image name, including file extension (ie ‘image.jpg’) is held in a custom field ‘background’ which can be set for any page or post on the site when you write it. The template just reads this in and uses it for the CSS style:
<!-- Decide on background graphic for the current page or post -->
<?php
// Capture the custom field "background" //
$background_graphic = get_post_meta($post->ID, "background", $single = true);
// For the search results page
if (is_search()) {
// Use a image from the homepage //
$background_graphic = get_post_meta(4, "background", $single = true);
}
// For the category Portfolio //
elseif (in_category('12')) {
// If there is no value use a generic one from Page 9 //
if ($background_graphic[0]=="") {
$background_graphic = get_post_meta(9, "background", $single = true);
}
}
// For the category Play //
elseif (in_category('25')) {
// If there is no value use a generic one from Page 13 //
if ($background_graphic[0]=="") {
$background_graphic = get_post_meta(13, "background", $single = true);
}
}
// For the page Info and its children //
elseif (is_page('11') or $post->post_parent=="11") {
// If there is no value use a generic one from Page 11 //
if ($background_graphic[0]=="") {
$background_graphic = get_post_meta(11, "background", $single = true);
}
}
// For the category Blog //
elseif (in_category('16')) {
// If there is no value use a generic one from Page 12 //
if ($background_graphic[0]=="") {
$background_graphic = get_post_meta(12, "background", $single = true);
}
}
?>
<!-- Body style to control page backgrounds using WP custom fields -->
<style>
body { background-image: url(<?php bloginfo('stylesheet_directory'); ?>/images/<?php echo $background_graphic; ?>);
background-repeat: repeat;
background-attachment: fixed;
}
</style>
This code is in the header.php file and is a bit more complex here as I wanted subpages to inherit the parent background image if no specific one was specified, hence all the if, then stuff. For example blog posts don’t have their own background images specified, they use the overall background taken from the blog front page.
But basically it is very simple, the custom field is read from the page or post into a variable and then used directly in a CSS style definition.
Dan.F: The images aren’t all optimised or implemented properly yet. For pages with more rigourous content, I’m finding the most subtle backgrounds are best so as not to compete, but for a few key pages, like the homepage or the ‘about me’ page I’m making more of a stament by choosing an impactful image. My photography is something I want to give a sense of. For the individual projects, the background image will be a pattern or detail from the project itself. The difficulty is currently in getting either very large images so the edges are out of view down to a small file size, or using smaller ones but tiling them well.
Hope this helps anyone trying to do something similar…
?
