Back to Table of Contents

Adding a Background Image

The main reason for creating a custom login form is to create a custom background so that your users can identify with your organization. The first step is to create an image that will act as the background for your login form

Create a Background Image

Using your image editor of choice, create an save an image that can act as the background image for your login screen. You can save the image as a png or jpg image. Above are two different examples. Note the different orientation.
Note: Make sure you know the dimensions of your image.

Adding a jpg image to your resource file

Using the provide LoginTemplate.rez as your starting settings file, open it in FirstClass Designer and drag your jpg image on to the open settings file.
Drop the image anywhere on the resources list view.
This will create a new category called jpeg and place your image within that category.

Adding a PNG image to your resource file

If you are adding a PNG image you must drag and drop on to the PNG section and NOT the PNG Icons section

Add an Image viewer field to the form

Open your FirstClass Login Form and expand the window slightly as shown then select Image Viewer from the Fields > Graphics menu

Open the Field Attributes form for the Image Viewer Field

  1. Click on the blank space to the right of your expanded form to drop the Image Viewer field on the form.
  2. Open the field attributes form for this object

Modify the Field Attributes for the image

  1. Set the Top field to 0
  2. set the Left field to 0
  3. Set the Height to the height in pixels of your image
  4. Set the Width to the width in pixels of your image

Set the Image and resize the form

Double-Click on the Image Viewer field and you will be able to select your imported image.
Resize the form so that the edges of the form match the edges of the image viewer field.

Send the image viewer to the back

Select the image viewer field and choose Send Field to Back from the Arrange > Draw Order menu

Rearrange and remove any extraneous fields

With your background in place, you can now rearrange any fields so that they will be better displayed and represented on your form.
You can hold the <CTRL> key down on a Windows computer or the <CMD> key down on a Mac to select multiple fields at once.