This is all done by:
1. creating your background image
2. Putting it in the appropriate folder on the server (usually the images folder in your custom template system).
3. Modifying your stylesheet.css file to call and position that image.
You need FIRSTLY to understand how the css declarations work for background images, so go to W3SCHOOLS.COM and go through their CSS TUTORIALS.
You can use very SMALL images and TILE THEM both across AND/OR down the screen. You can use larger images and position them to start at the center and the top of the screen, and tile horizontally (x-axis) only.
You can FIX the position of the image if you want to.
http://sbxlive.com has a background image that fills the whole screen, is FIXED at the center and top and tiles on the X Axis only:
Code:
body { background-image: url(../images/bodyback.jpg); background-position: center top; background-attachment: fixed; background-color: #000; margin: 0; font-family: verdana, arial, helvetica, sans-serif; font-size: 70%; color: #9e9e9e; }
There are "cleaner" ways of declaring the background css...
Code:
body {margin: 0;font-family: verdana, arial, helvetica, sans-serif;font-size: 75%;line-height: 150%; color: #4d4d4d;background: #fff url(../images/bodyback.jpg) center top repeat-x;}
Bookmarks