The easiest way to do a background image is:
background: #ffffff url(path-to-background-image) top left no-repeat;
The color (#ffffff) should be a nice color in case something happens to the image. The path to the image depends on where the CSS is; if it’s a CSS file in assets/templates/yourtemplate/yourcssfile.css, and the images are in assets/templates/yourtemplate/images, then the path would just be url(images/mybgimage.png). If you are using a snippet or TV to make the background dynamic, then it would be url(assets/templates/mytemplate/images/myimage.png).
You can make a dynamic background image by using a TV to hold the image filename, then in the template head have a brief style block:
<style type="text/css">
#banner{
background:#ffffff url(assets/templates/mytemplate/images/[*bannerbg*]) top left no-repeat;
}
</style>
Then make a simple TV named bannerbg with a text input type, and in the TV for each page you can just specify the filename you want. It’s handy to use @INHERIT in the TV default, then you can just specity the filename for each folder/document in your document tree, and its children will inherit that image.
I’ve done something similar, only I used a snippet instead of a TV, and it pulled a random image from the assets/templates/mytemplate/images folder. So every page got a random background image.
Why a snippet instead of a TV? A TV gets an editing field on each document editing page. If I don’t need to be editing the value, a snippet is more suitable.
☆ A M B ☆