One of thesitewizard.com'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 this chapter deals with the site that you designed using my BlueGriffon 3 Tutorial. Certain details, particularly those relating to the tags to click on the status bar, are specific to the underlying HTML used in that tutorial. If you have designed your site on your own, you may have to adapt the instructions accordingly. Alternatively, if you do not even have a site yet, I suggest that you start at the beginning with the guide on how to create a website.
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:
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 it on the Internet.
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.
Start up BlueGriffon and load the page where you want to insert the picture.
Click somewhere in the column or section of the page where you want the background image to appear. For example, if you want the picture to appear in the right column, click to put your text cursor somewhere in that column.
Look at the status bar near the bottom of the BlueGriffon window. For example, if you have placed your cursor in the right column, the status line probably says something like the following.
If you will recall from chapter 4, the various tags in the status bar are the labels for the different sections of your page. To refresh your memory, here's the list from that chapter:
div#tswsidecol — refers to the side (or left) column
div#tswcontent — refers to the content (or right) column
div#tswfooter — refers to the footer
div#tswheader — refers to the masthead or header section
div#tswcontainer — contains the header, footer, left and right columns (more on this later)
If you want the background picture to appear in the content (right) column, click the div#tswcontent tag.
Note that this tag will only be present if your cursor is somewhere in that column. Likewise, if you want the
picture in the side (left) column, click the div#tswsidecol tag. And so on.
This is similar to what you did when you set the background colour ("color" in US English) in chapter 4.
If your web page was not created following the instructions of my main BlueGriffon tutorial, you will need to find out the 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.
Open the "Style Properties" panel if you have not already done so. You can do this by clicking "Panels" on the menu bar, followed by "Style Properties" in the drop down menu that appears.
Click the "COLORS" header to expand the section.
Click the "+" sign in the "Images" part of that section. A drop down menu will appear.
Click "Add a background image" from the menu.
A window without title will appear. Click the folder icon next to the "Enter an image URL" field.
Go to the folder where you placed your picture, click it once to select it, and click the "Open" button.
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.
Click the "OK" button.
A thumbnail of the picture should appear in the "Images" box in the Style Properties panel. The background of your web page will also be updated accordingly.
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 or its position, using the "Repeat on X axis", "Repeat on Y axis" and "Position" fields next to the thumbnail of your picture in the Style Properties panel. (Note that you may have to resize your Style Properties panel so that it is even wider to see the fields next to these labels.)
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. You can also specify a location for the picture using the "Position" drop down box.
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-2018 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 Put a Background Image on Your Website with BlueGriffon
