Changing background to contain an image

Suppose that you want your Specify Web Interface to contain a background image.

We will assume that ours is named back1.gif for this first example. Our image, "back1.gif" is located in the HTML directory for our site in the "images" folder. For this example, we only want to display our image once, and we want it centered on the screen. And just for fun, we want the text to scroll, but we want our image to remain stationary in the window. Finally, we want a cyan color background in addition to this image.

First, backup your Specify.css file, then open it and add this line to the body element, making it the first line in the block (The block is between the open and close curly braces { and }).

     background: url(../images/back1.gif) center fixed no-repeat;

Substitute your image name for "back1.gif".

The next line should be "background-color".

In our example I will change it to cyan, but you can change it to whatever you would like, or delete it if you do not want a background color.

     background-color: #00FFFF;

Save your file and then check your Specify Web Interface to see the changes.


For our second example, our image is still in the "images" folder in the HTML directory of our site. This time it is named "back2.gif" and we want it to repeat.

Again, make sure that your Specify.css file is backed up.

Add the following line at the beginning of your "body" block (just after the open curly brace { ).

     background: url(../images/back2.gif) repeat;

If you want your background to remain stationary and the rest of the page to scroll, add the word "fixed" after repeat, like this:

     background: url(../images/back2.gif) repeat fixed;

Where your image name is substituted for "back2.gif".

You can delete the next line which begins with "background-color:".

Save your file and check your web interface.

Back to Cool Tips