Hi,

I wanted to this as well, so I dived into the code and the forums and came up with the following.

I first uploaded the images I wanted to add as a custom background each in a seperate folder into the /images/background

Example:
Let's say I want to use a picture called rail_img.jpg.
Create a folder called rail in /images/background/, then upload the picture in this new folder.

Next go to the css/background folder and copy the street.css file. Next rename it, and edit the contents. Upload this file to /css/backgrounds

Example:
Copy the street.css file, and rename it to rail.css
Open the file and change

#page {   
    background: #9FC3D1 url(../../images/background/street/street_img.jpg) 50% 50% no-repeat fixed;  
    background-size: cover;  
}

to

#page {   
    background: #9FC3D1 url(../../images/background/rail/rail_img.jpg) 50% 50% no-repeat fixed;  
    background-size: cover;  
}

Finally, upload this file to /css/backgrounds

Okay, last step.
Open the config.xml file and find the following:

<field name="background" type="list" default="gradientblue" label="Background" description="Select the background.">  
        <option value="gradientblue">Gradient Blue</option>  
        <option value="gradientgreen">Gradient Green</option>  
        <option value="gradientgrey">Gradient Grey</option>  
        <option value="ambientpink">Ambient Pink</option>  
        <option value="ambientturquoise">Ambient Turquoise</option>  
        <option value="ambientsunset">Ambient Sunset</option>  
        <option value="wood">Wood</option>  
        <option value="street">Street</option>  
        <option value="grass">Grass</option>  
        <option value="desert">Desert</option>  
        <option value="bridge">Bridge</option>  
        <option value="animated:default">Animated Default</option>  
        <option value="animated:red">Animated Red</option>  
</field>

Add your background to the list by inserting the following between the field tags

<option value="rail">Rail</option>

It is important that the value matches the name of the css file you created earlier.

That was the final step. If everything worked out your background should now be listed in the template settings.

There is an easier way, if you don't mind losing one of the pictures. I just saved over ambient pink with the picture I want to use.

Hi

The simplest way is to upload your new background picture and add the following to custom.css changing the filename. You could look at creating a new profile

#page {    

background: #9FC3D1 url("/demo/themes/joomla/2012/subway/templates/yoo_subway/images/background/street/street_img.jpg") 50% 50% no-repeat fixed;
}

Roy

you could just copy the Ambient Red image over another image the way julia described above(probably the easiest way if you don't feel like editing anything) or use the image and follow what green parrot or philotes mentioned above .
The image is located in~ images/backround/animated/animated_red.jpg
its just a jpg, so its not automatically animated or anything like that

julias method~
If you copy that jpg change the name to another background image you don't plan on using (example grass_img.jpg) and then replace the original grass_img.jpg image in the folder
images/backround/grass/grass_img.jpg
you can just pick the grass image and it will be the red one(they are both the same size so you shouldn't have to mess with anything)

I would be interested in how this is done too.

thanks
George

@julia.scmaltz.1

Your example works just fine. Simple as that.

How do you stop the animation altogether? I'd just like Ambient Red as an image but not moving. Any ideas? Thank you.

My background is upside down. No trouble, I will upload the image upside down....but....what the hell !?

Thanks Philotes, perfect solution!

I'm personally curious on how you would create your own custom animated background. Anyone know how?