When I was designing the look of this site, I decided it might be cool to have a background image that automatically resized itself depending on the size of the viewport (browser window). There are several ways to go about this but the simplest is usually the best. Using a post at css-tricks.com as a jumping-off point and studying the code of this page, I was able to get a resizable background image using nothing but some clever CSS in my custom Thesis theme.
Since it isn’t possible to resize a background image in CSS, the idea is to put an image at the top of the page, set it to 100%, then position the rest of the content on top of it. Now, when the browser is resized, the image will adjust so that is it always 100% of the height and width.
If you are not using the outstanding Thesis theme framework for WordPress, this won’t make much sense to you. You’re better off referring to the links above. If you are using Thesis, here’s what I did.
In the custom_functions.php file, add a custom function to insert your background image immediately after the <body> tag:
add_action(‘thesis_hook_before_html’, ‘my_bkg_img’);
function my_bkg_img(){
?>
<div><img id=”background” src=”<?php bloginfo(‘template_url’); ?>/custom/images/bkg.jpg” alt=”” title=”” /></div>
<?php
}
Explanation:
Using the Thesis hook system, you are adding the function named “my_bkg_img” to the “thesis_hook_before_html” hook. This adds whatever is in your function immediately after the <body> tag. The function is really just the HTML for your background image wrapped in a div. You can name the function whatever you like. Make sure the path to the image is correct. I put mine in the images folder within the custom folder in the Thesis theme directory. The image must have an ID. I named it “background” but you can name it whatever you like as long as you reference it correctly in the CSS.
Now add this CSS to the custom.css file:
/* Reset the html and body elements and set the width and height to 100%.? This allows child elements to inhereit the 100% size. */
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
/* My background image’s id is “background” (clever, huh?). Set the the z-index to 1 so everything else can float above and width and height to 100% to fill the screen. */
.custom #background {position:absolute; z-index:1; width:100%; height:100%;}
/*#container is is the default name of the div that wraps all content in Thesis. If you have changed the name of this wrapper, you’ll need to change it here too.? The width and height are 100% and positioned at the top right corner if the page because this is the element that will contain the scroll bar. That’s what the overflow:auto does.? If the width is less than 100, the scroll bar will appear inside of the pg which looks weird. Finally, set the z-index to 2 so it will appear above the background image. The Thesis CSS assigns a background color to #container so we need to make it transparent.*/
.custom #container {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2; background-color:transparent;}
/*Since the #container div had to be set to 100% of the width of the browser, we must set the width of the #page div, which normally inherits width from #container. Make it as wide as you want.? margin:0 auto makes the div align to the center of the window.*/
.custom #page {margin:0 auto; width:99.3em;}
Explanation:
See the comments for how the CSS works. Feel free to leave the comments out of your file but I thought it would be easier to add comments in the code than refer to each line here.
