HOWTO: Make a scalable background image

juggledad · #1 Dec 16, 2010, 12:49 PM

If you would like to have your background image shrink and grow when someone makes the page smaller or larger, you can do it by following the following instructions

1) create a folder in the 'wp-content' folder called 'images' (or what ever name you want to use)
2) add your large image (say 1600 x 1600) called 'background.jpg' into the 'images' folder
3) go to ATO->Body, Text & Links->Body Style and remove the 'background' statement if there is one
4) go to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top and add the following

HTML Code:

<img src="<?php bloginfo('wpurl'); ?>/wp-content/images/background.jpg" id="bg" />

NOTE: As of 3.6.4 you need to change this to

HTML Code:

<img src="yourdomain.com/wp-content/images/background.jpg" id="bg" />

5) go to ATO->Add HTML/CSS Inserts->CSS Inserts and add

HTML Code:

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#wrapper {
position:relative;
z-index:1;
}

That's it. Your background image should now scale. You can use a gif and probably a png for the image. This was tested in Safari, IE8 and Firefox.