How to Center a Background Image or Photo on Your Web Page Using KompoZer

And How to Get Rid of the Tiling (Repeats)


How to Centre a Background Image or Photo on Your Web Page Using KompoZer

by Christopher Heng, thesitewizard.com

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.

Prerequisites

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

How to Remove the Duplicates of Your Background Image on Your Web Page

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:

  1. 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".

  2. A dialog box entitled "Page Colors and Background" will appear. Click the "Advanced Edit" button on that dialog box.

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

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

  5. Type "background-repeat" (without the quotes) into that field.

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

  7. Click the OK button.

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

How to Centre Your Background Image

If, after looking at your modified background, you still want the background image to be centred on the page, do the following:

  1. Once again, click "Format | Page Colors and Background".

  2. Click the "Advanced Edit" button in the dialog box that appears.

  3. Click the "Inline Style" tab near the top of the dialog box.

  4. Type "background-position" (without the quotes) into the "Property" field.

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

  6. Click the "OK" button to keep your changes and get out of the Advanced Property Editor.

  7. 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 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 Centre a Background Image or Photo on Your Web Page Using KompoZer





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.