How to Put a Background Image on Your Website with BlueGriffon

How to Use a Picture as the Backdrop of Your Web Page

How to Put a Background Image on Your Website with BlueGriffon

by Christopher Heng,

One of's visitors asked me how he could put a background image on his web page using the free BlueGriffon web editor. By this, he meant that he wanted to put a picture that formed the backdrop to the words and main content of his page. This tutorial shows you how to do this.

Please note that I will assume that you already know how to create web pages with BlueGriffon. If this is not true, please refer to the main BlueGriffon Tutorial series instead. In addition, if you have never made a website before, you may need to start at the true beginning, with the How to Create a Website tutorial.

Copy the Image to Your Website Folder or Its Subdirectories

The first thing you need to do is to copy the picture or photo you want to use into the "images" folder of your website directory. If you have followed my BlueGriffon tutorial, you would have created such a directory in chapter 2 to place things like your site logo and other pictures. In this case, simply copy your background picture into that same location.

If you do not have an "images" folder in your website directory, you can either create one, or copy your picture into the same directory as the page you want to use it on.

Please note the following important points:

  1. Do not skip this step. Do not leave your image in some folder elsewhere on your hard disk. If you do that, you run the risk that the background picture will only show up when you view your site with BlueGriffon, and not when you view your site on the Internet.

  2. Your picture should either be in the PNG, JPG or GIF format. If you are using an image file in some other format, use a picture editor to convert it, otherwise some browsers will not be able to display it. You can find many free picture and photo editors here, if you don't already have one.

How to Insert the Picture as a Backdrop in BlueGriffon

  1. Start up BlueGriffon and load the page where you want to insert the picture.

  2. Click somewhere in the main section (ie, the right column) of your web page. (If your page does not have any columns, just click anywhere, such as in the middle of the page.) A text cursor should appear in that spot.

  3. Look at the status bar near the bottom of the BlueGriffon window. If you have created your site using my BlueGriffon tutorial, the status line probably says something like the following.

    <body> <div #doc3 .yui-t1> <div #bd> <div #yui-main> <div yui-b> <div .yui-g> <p>

    (Don't worry if the line does not look exactly like the above. The exact list of words depends on which portion of the column you clicked. It's just an illustration to help you find the status bar.)

    If you want the background picture to span the entire two columns, click the part of the status bar that says "<div #bd>". If you want the picture to be restricted to the right column, click "<div .yui-g>". If you recall, this is similar to what you did when you set the background colour ("color" in US English) in chapter 2.

    If your web page was not created following the instructions of my main BlueGriffon tutorial, you will need to find out the <div> tag that corresponds to the portion of the page where you want to place the picture. There's no way I can be specific in such a case, since the exact tag will depend on what you did to create the page, and will vary from person to person.

  4. Click "Panels | Style Properties". That is, click "Panels" on the menu bar, followed by "Style Properties" in the drop down menu that appears.

  5. Click the "Colors" section header to expand the section.

  6. Click the "+" in the "Images" part of that section. A drop down menu will appear.

  7. Click "Add a background image" from the menu.

  8. A window without title will appear. Click the folder icon next to the "Enter an image URL" field.

  9. Doubleclick the "images" folder to open it. You should be able to see the picture that you copied there earlier. (If you didn't create an "images" folder, but placed your pictures in the same location as your page, the picture should be immediately visible.) Click it once to select it, followed by the "Open" button.

  10. The location of the image should appear in the "Enter an image URL" field. Make sure that the checkbox for "Make URL relative to the document" has a tick in it. If not, click it to put one there. Then click the "OK" button.

  11. A new dialog box, with the title "Please enter an ID", will appear. Type something like "rightcolumnbackground" (without the quotes) or "backgroundofpage" (without the quotes). I suggest that you stick to small (lowercase) letters of the alphabet, numbers, hyphens ("-") and the underscore ("_"). Do not put any spaces in the word. Start your ID with a letter of the alphabet. The ID must be unique, that is, it cannot be one that is already used by BlueGriffon elsewhere on your page. If you are afraid of accidentally creating an ID that conflicts with an existing one, given that you probably don't know what IDs are already in use, make up a long name that describes your situation in gruelling detail (such as one of my suggestions above). Such a name will hopefully be unique.

    Don't worry about coming up with a beautiful ID. It is not actually displayed. It is merely needed to identify the part of the web page where your visitor's browser is to place the background picture.

    When you're done creating an ID, click the "OK" button.

  12. You should be able to see your picture in the relevant part of your web page.

    If the picture is smaller than the space available, it will be duplicated (repeated) so that it covers the entire screen. You can control this repetition, by clicking one of the options in the "Repeat on X axis" and "Repeat on Y axis" drop down boxes of the Style Properties panel. For example, if you don't want the image repeated horizontally, select "Don't repeat at all" in the drop down box for "Repeat on X axis". Likewise, if you don't want the image repeated vertically, select the same option for the "Repeat on Y axis" field.

  13. When you're done with the Style Properties panel, click "Panels | Style Properties" again to dismiss it.

After adding your image, check to see if it actually detracts from your web page's usability. That is, make sure that the picture doesn't have such strong colours that your main content cannot be easily read. In addition, images that are too busy also reduce the ease and speed at which your visitors can read the page, annoying them unnecessarily.

If all is well, upload your page to your site, remembering to upload your background picture as well.

Copyright © 2015-2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from

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

Do you find this article useful? You can learn of new articles and scripts that are published on by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at 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 or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Put a Background Image on Your Website with BlueGriffon

Link to Us
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Web Hosting
Perl / CGI
.htaccess / Apache


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