MuNuby Help - Background Images

Today's MuNuby Help lesson deals with background images.

You have already set the background-color property in your ID and Class divs. Now you may want to add a little "texture" or "personality" to your main page background.

Design gurus will tell you not to put text over an image as it will be difficult to read. I would make a few exceptions to that rule for my own personal purposes. One exception would be an image under the sidetitle text. Another design rule to keep in mind is "content is king". If you use tiled background images, make them subtle patterns and use complimentary colors so they don't overwhelm or distract from the content.

Now the process to insert background images.

First, upload the image file that you want to use. Select the Show me the HTML radio button and click the [EMBEDDED IMAGE] button at the bottom. Do not close the window yet, because you will be copying some information from it to paste into your stylesheet.

Next, open you stylesheet. The top div property set is probably for #body. To add an image for your background insert the code in bold as shown below, substituting the path to your image from the file upload window.

#body {
background-color: #000000;
background-image: url(http://munuviana.mu.nu/archives/stars.gif);
}

[SAVE] and [Rebuild Indexes Only].

You can put an image background in any element in your page.

There are several options to display your background images. To learn more about how to make an image fixed, make it scrioll, make it tile the whole page, make it repeat only across the top, make it repeat only along the left side, and more go to W3Schools: CSS Background. There are several examples of code and results and a place to experiment to see how it will look.

Here are a couple of links to some sites for FREE background images and textures:

Absolute Background Textures Archive
Design to a T

Posted by Madfish Willie at April 28, 2004 11:32 PM