I've tried this a couple of ways and this seems to be more like what I want. I've added this to my functions.php file...
function childtheme_absolute_background() {
?>
<div id="bg">
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="http://localhost:8888/diamondigloo/wp-content/themes/diamondigloo/images/diamondigloobackgroundcrop.jpg" alt=""/>
</td>
</tr>
</table>
</div>
</div>
<?php
}
add_action('thematic_after', 'childtheme_absolute_background');
I've put this at the top (is this the right place for it? does placement matter?) of my child theme's style.css...
* {
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}
#bg {
position: fixed;
}
#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}
#bg td {
text-align:center;
vertical-align:middle;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}
Everything works and looks great now, but my content isn't scrolling. The instructions say to put this in the site's HTML...
<div id="cont">
<div class="box">
<!-- content in here -->
</div>
</div>
And then add some more CSS but I don't know how to do that step in the functions.php file.
Can anyone help?