HOWTO: Make a scalable background image

Updated 1/21/2015
here is an easier way to do it using the CSS3 'background-size: cover;' option. Just set a background on the HTML element by adding this to the CSS Inserts
html {background: url(http://yourdomain.com/wp-content/images/background.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: left top;
}

That's it, all done.

=====================================

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
NOTE: As of 3.6.4 you need to change this to
5) go to ATO->Add HTML/CSS Inserts->CSS Inserts and add
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.

I've got a background running, but it only appears on one page, which is sort of set as the "home" page although it's not supposed to be.
http://www.smith-eddy.com

did you do step 3 + 4? please check it

Iv'e just tried this and can't seem to get it to work. My URL is http://cifect.org/. Can you help me get my background to show?

Thanks!

your code is pointing the background at http://cifect.org/wp-content/themes/...ackground7.png but there is no image by that name in that location.

you are also using http://cifect.org/wp-content/images/...allpaper19.jpg and there is no image at that location.

If you can't type the url into the address bar and have the image show, it will never work in the theme.

Got that running, have you got any idea how i could combine that with different backgrounds on different pages (I tried: http://forum.bytesforall.com/showthread.php?t=9525)?

I only get one of the two running at the same time.

thanks in advance to everybody reading.

As an update

since ATA V3.6.7 and the banning of using PHP in theme options by WordPress, you can no longer use <?php bloginfo('wpurl'); ?> and will have to code the path to the graphic explicitly...

Can anyone tell me how I can cause the background image to not repeat when it reaches its maximum height in my page? I have tried all the no repeats I can, and nothing.

I am using the method outlined above here - it works, and I have an image that is 1600x3000, but apparently that's not enough. When you get to the bottom of my page, the BG repeats, and looks like crap.

Any thoughts are appreciated. Thanks.

Following the steps in this hint, you should't get a repeat since the image scales. What, exactly, have you done?

I've done all of this part:
And my BG image is 1600x3000.

I know the image is being pulled from the right location on my server.

It doesn't repeat often, but if a page has a very long post, or many posts, It seems to repeat at the bottom.

You can see what I've done at http://www.vertigovenus.com

Thanks very much for the input.

Add a 'repeat-image: no-repeat;'

So, I added this to the img#bg section, and the #wrapper section, and the image still repeats at the bottom... not sure what is going on?

What is the URL?

http://www.vertigovenus.com. It only shows when I have three REALLY long posts on the blog page. Otherwise, it's fine.

ummm, go back and read step #3 - also I updated step #4 because of WordPress requirements.

juggledad:

thanks a heap! I really wanted this. I did have to add a / to the front of yourdomain.com in this

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

statement. Don't know if that's just my setup, or if others will run into the same problem.