Setting the Background
Open the Page menu on the menu bar to access the background options. Either choose a solid color, or drag an image to the Background panel to create a tiled background.
Solid Color vs. Tiled Background
A solid color background, such as white, is frequently the aesthetically most pleasing choice. It also makes it easy for StudioLine to share images where appropriate.
Irregular textures with little contrast can also be quite suitable for a background - as long as they don’t show any visible margins when tiled and don’t interfere with the readability of text.
Busy images, strong contrasts or geometric patterns, however, may be very distractive. They also introduce a number of issues when graphics with transparent areas appear on a page.
Transparency and Tiled Background
Where feasible, StudioLine will attempt to share buttons and other common images between pages. This will save time during transfers and while browsing a site.
When transparent images are placed on a page, some of the tiled background will show through. During rendering, a cut-out of the tiled background is incorporated into the graphics file used by the browser. That same graphics file would then be shared for various screen positions, where it has to blend perfectly with the background pattern at those locations.
Background images with geometric or other regular patterns (such as text or logos) may yield less suitable results.
|
|
|
Here is a simple 'at' (@) character, created by using the text tool and choosing a font color. The blue markers indicate the character’s height and width. |
|
|
Once a button effect and a drop shadow were added, the text had to be converted to an image.
The @ character and shadow don’t fill a solid, rectangular area. In some areas, the solid background color is visible. (Also, because of the drop shadow, the dimensions of the resulting image file are now larger than the original height and width.) |
|
|
At this point we purposely experimented with a tiled background of squares. StudioLine incorporates a section of the background squares in the graphics file that it prepares for browser use. |
|
|
If this graphics file is shared for other locations on the page, the grid pattern may be disrupted.
This demonstrates that a regular, geometric pattern (such as squares) is usually a poor choice for backgrounds. |
|
If regular pattern backgrounds cannot be avoided, then it may be necessary to:
-
use only non-graphical text,
-
use rectangular images without shadows or softening, or
-
use the Backdrop image tools to place images and text over solid color rectangles, or
-
place images and text on top of a non-transparent rectangular image.
Render at Ultimate Position
If the sharing of a single transparent image at various locations leads to a disturbance of a background pattern, then StudioLine can be instructed to generate unique versions for each occurrence. StudioLine will determine the ultimate positions where the image will appear in the browser, incorporate the appropriate background sections and store each as a unique graphic file.
On pages that are centered, right-aligned or aligned to the bottom, the ultimate position of images over the background pattern will change with the height or width of the browser window. Depending on the specific background pattern, the function “Render at Ultimate Position” may be ineffective for pages that are not aligned top/left.
Copying Background to Other Pages
To achieve consistency, the background color or graphic should be defined in Layout Template mode so that it is automatically applied to all derived pages. Sometimes, there may be a need to copy settings from one page or layout to another:
-
Open a page, layout or template.
-
Select Background from the Page menu.
-
Press the Lock button in the Background panel to freeze the current settings.
-
Open a different page, layout or template.
-
Press the Copy button in the Background panel to apply the settings.
Using Untiled Images
It is also possible to place an image directly on a page, thus using it as an untiled backdrop.
-
Select Background from the Page menu and choose a single color.
-
Place an image on the workspace.
-
Choose Image Tools from the Edit menu and apply an appropriate transparency or other desirable effects.
-
Right-click the image and choose Stacking Order – Send to Back.
-
Right-click the image and choose Lock Position to avoid accidental movement.