I was asked by a visitor a while back how he could add a background image to his web page using Nvu and KompoZer. Unlike a normal picture that you place on your website, when you place a background image, any words you type onto your page will appear superimposed on that image. It thus appears like a backdrop to your page's content. This article shows you how you can do this with either one of the free WYSIWYG web editors.
This article assumes that you already know how to use KompoZer and Nvu. If this is not true, please check out one of the following tutorials to get started. (Choose the relevant one for the editor that you're using.)
If you are a total beginner, and don't know anything about creating your own website, you should also read How to Make / Create Your Own Website: The Beginner's A-Z Guide. Making a website involves much more than just designing the visual appearance of your website.
To add a background image to your web page in Nvu or KompoZer, do the following:
The first thing you will need to do is to copy the background image to the folder (on your own computer) where you placed your website's files. For example, if your index.html and other web files reside in "C:\Users\thesitewizard\Desktop\website", copy the image into that folder. If you want to separate your image from your HTML files, place them in a folder inside your website folder, eg "C:\Users\thesitewizard\Desktop\website\images".
Do not leave your image in some other directory outside your web folder hierarchy if you want the image to be properly handled and referenced by Nvu and KompoZer.
If the filename of your image contains things like capital (uppercase) letters or spaces, rename the file to something entirely in small (lowercase) letters without any spaces or punctuation marks. Otherwise you may run into numerous problems later on. For those who are curious, you can find a description of some of the possible problems mentioned in the article How to Create Good Filenames for Your Web Pages.
Now start KompoZer or Nvu and open the page where you wish to insert the background image. If this is a new blank page, be sure to save the page first (even though it is blank) before continuing. If you don't, you will find one of the editor's options, namely the "URL is relative to page location" checkbox, disabled later.
Click the "Format" menu in the web editor and select the "Page Colors and Background" item. A dialog box will appear. Near the bottom of the dialog box, you should be able to see the words "Background Image" and a blank field below that.
If you're usin Nvu, click the "Choose File" button. If you're using KompoZer, click the folder icon beside the blank field. The "Select Image File" dialog box will appear. Select your background image and click the "Open" button.
You will be returned to the "Page Colors and Background" dialog box, where the name (and possibly folder) of your background image has been entered for you in the "Background Image" field. Below that field, there should be a check in the "URL is relative to page folder" option. Click OK to dismiss the dialog box, and you should now see your background image on your web page.
Note: if you find that the "URL is relative to page folder" option is unchecked and/or greyed out, it means that you failed to save your file as mentioned in my earlier step. Click "Cancel" in such a case and go back to my earlier steps and carry out those steps first.
Once you've done the above, you should be able to carry on designing your web page, this time with your image as a backdrop to your site's main content.
(Note: if you find that multiple copies of your image appear on your web page, filling the width and height of the page like the tiles on a floor, and you prefer to have only a single copy, continue on with the article How to Centre a Background Image or Photo on Your Web Page Using KompoZer.)
If you find that the image appears find in Nvu or KompoZer when you edit the page on your own computer, but it does not when you upload, look through the following checklist:
Did you place the image in the main folder of your website (or one of its subfolders) on your computer as mentioned above? If not, start all over again. This time, make sure the image is copied to the folder before you continue.
If you did not save your web page (even if it's completely blank) before inserting the background picture, Nvu/KompoZer will insert a "file://" reference to the image instead of the correct relative web address. This will work on your computer, but not on a "live" website. In theory, Nvu/KompoZer fixes such references when you upload. However, if you manually upload using an FTP client, or you hit one of the editor's bugs, it's possible that the web addresses (URLs) will not be correctly rewritten. My recommendation is thus to save your page before inserting the background picture.
If your filename contains anything other than small (lowercase) letters and numbers, return to the beginning again. This time, rename your file before continuing.
If all else fails, see the article Why Do the Pictures on My Web Page Not Show Up in Nvu / KompoZer? Troubleshooting the Broken Images on Your Page to learn how to manually fix the problem.
I know that some of my steps seem very strange (and unnecessary) to newcomers, and as such, they sometimes omit certain parts. However, those steps are the result of years of hands-on experience with the editor and interaction with many of thesitewizard.com's visitors. They are designed to avoid commonly-faced problems with Nvu/KompoZer and with web creation in general. Unless you already know what you're doing, it's honestly less of a hassle to follow those steps even if they seem very stupid (like having to rename the file to remove spaces and capital letters). Once you have a bit of experience dealing with Nvu and KompoZer's foibles, you will be able to do things differently without causing unexpected side effects. But the main thing is to get the page working first. Experimentation can come later.
Copyright © 2008-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a Background Image to Your Web Page in KompoZer and Nvu
