One of my visitors inserted a background image into her web page using KompoZer only to find that multiple copies of her picture appeared on her page, covering the entire visible area like the tiles on a floor. She wanted to know if there was a way to override this default behaviour so that only a single copy of her picture appeared on the page. In addition, she wanted that picture to be centred ("centered" in US English) on the page. This article answers that question.
I will assume that you already know how to create a website. If this is not true, please read How to Make / Create Your Own Website: The Beginner's A-Z Guide instead.
You should already know the basics of using KompoZer. This article answers a specific question, that of removing the tiling of a background picture and optionally centring ("centering") it. I'll assume that you already know all the things taught in my main KompoZer Tutorial. For those who don't know how to insert a background image, please see How to Add a Background Image to Your Web Page in KompoZer and Nvu before continuing.
Incidentally, I've only tested the procedure described in this article with KompoZer. However, it's possible that it also works with Nvu, since Nvu is the older version of KompoZer, and the two tend to work the same way (except that KompoZer has fewer bugs).
Generally, if your background picture is smaller than your KompoZer window, you will see duplicates of your picture repeated across the page, both horizontally and vertically, filling the entire background. To remove this effect, we will have to do two things: stop the tiling effect, leaving a single copy, and centre that single picture on the page.
To stop the web browser (and KompoZer) from repeating your image, do the following:
Click "Format" from the menu bar. When a drop down menu appears, click the "Page Colors and Background" item. In the interest of brevity, I shall refer to this sequence of actions as clicking "Format | Page Colors and Background".
A dialog box entitled "Page Colors and Background" will appear. Click the "Advanced Edit" button on that dialog box.
A dialog box with a title of "Advanced Property Editor" will appear. There is a row of tabs near the top of that dialog box. Click the "Inline Style" tab.
Near the bottom of the dialog box, you will see two empty fields side by side: the "Property" and "Value" fields. Click the blank field under "Property" to put your text cursor there.
Type "background-repeat" (without the quotes) into that field.
Either hit the TAB key (on your keyboard) to move your text cursor to the "Value" field, or, if you can't find the TAB key,
use your mouse to click the blank field under "Value". Type "no-repeat" (without the quotes) into that field.
Click the OK button.
You'll be returned to the "Page Colors and Background" dialog box. Click the OK button to accept all the changes.
Your web page should now be left with a single copy of the image in the background. The top left corner of the image will be placed at the top left corner of KompoZer.
If, after looking at your modified background, you still want the background image to be centred on the page, do the following:
Once again, click "Format | Page Colors and Background".
Click the "Advanced Edit" button in the dialog box that appears.
Click the "Inline Style" tab near the top of the dialog box.
Type "background-position" (without the quotes) into the "Property" field.
Type "center" (without the quotes) into the adjacent "Value" field. Warning: do not
change the spelling of "center" to "centre", even if you use
British English. The
value must literally be "center" for it to work.
Click the "OK" button to keep your changes and get out of the Advanced Property Editor.
Click the "OK" button in the Page Colors and Background dialog box.
Your background image should now be centred on the web page. You can now save your changes and publish the page.
Copyright © 2010 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 Centre a Background Image or Photo on Your Web Page Using KompoZer
