How to Add a Background Image to Your Web Page in KompoZer and Nvu

How to Use a Picture as a Backdrop to Your Site


How to Add a Background Image to Your Web Page in KompoZer and Nvu

by Christopher Heng, thesitewizard.com

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.

Preamble

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.

Steps to Inserting a Background Image

To add a background image to your web page in Nvu or KompoZer, do the following:

  1. Copy the Image to Your Web Folder

    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:\Documents and Settings\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:\Documents and Settings\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.

  2. Rename the Image to a Web-Friendly Name

    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.

  3. Open the Web Page Where You Want to Place the Background Image

    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.

  4. Add the Image to the Page

    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.)

Troubleshooting: What to Do If The Image Does Not Appear in a Published Page

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:

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-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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 http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Add a Background Image to Your Web Page in KompoZer and Nvu





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.