Click here to return to the EZRound website.

Click here to buy EZRound now for only $29.95.

Using Repeating Background Images

This section of the tutorial is an addendum which shows you how to set a repeating image (wallpaper) for the background behind the EZRound container.

Setting the background color in EZRound

If your background image is a solid color, then you should use the eyedropper tool in ColorImpact (mentioned earlier in the tutorial) to set the background color in the EZRound color setup to be the same color as the background image.

This will result in the image slices being created as .JPG files which produce a more natural effect by “blending” the background color into the edge where the shadow occurs.

If you have a solid color background image - follow the steps outlined in the Colored Backgrounds tutorial addendum.

If your background image has a pattern, then you need to check the box in the EZRound color setup marked “Background color is transparent”.

This will result in the image slices being created as .GIF files.  The .GIF files will allow the background to show through along the edges of the shadow, but they do result in the edge of the shadow having a slightly more defined edge.

Setting the transparent background option

Note: as mentioned above - when you check the “Background color is transparent” option the image slices created by EZRound will be transparent .GIF images instead of .JPG files.

This means if you change from non-transparent to transparent after you have already placed the code into NOF, you will need to edit or replace the code you have already inserted into the MasterBorders since the filenames will no longer match (i.e. you are switching from .JPG to .GIF).


Enabling CSS in NetObjects Fusion

To set the background image in NetObjects Fusion so that it will work with this technique you need to have CSS enabled.  In NOF 7.5 you enable CSS by clicking on Tools --> Options --> Current Site from the pulldown menus to open the following screen.

Note: other versions may enable CSS differently - check you manual for details.

Enabling CSS in NetObjects Fusion
Then set the Text Formatting to “Cascading Style Sheets (CSS)” and click OK.


Setting the background image in NetObjects Fusion

To set the background image in NetObjects Fusion 7.5 click Text --> Edit Text Styles from the pulldown menus top open this screen:The text styles screen

NetObjects Fusion Options for setting text styes

There are two options we will consider using to set text styles at this point.

  • Styles in Site (affects ALL pages in this website)
  • Styles in Page (affects ONLY the current page of this website)

Since this page is the only one in this tutorial where we have set this background image we select Styles in Page.

Selecting Styles in Page

Next we Click New to open the New Text Style screen. On that screen we select to Redefine the HTML tag for <BODY>.

Redefining the <body> tag

When the Text Format screen opens, we click the Browse button and select the image to be used as the background behind the EZRound container.

We also set the Repeat to “Both”.

Note: if you have other requirements in regards to how your background image repeats you would set them here.

Setting a repeating background image

Click OK to save our changes and Close to end changing our text settings.

When we Publish Local we will see our website with the selected  background image behind the EZRound container (just as you see on this online page).


About the NOF WYSIWYG environment

After you set a background image - you may see that image appear as teh background in the  NOF WYSIWYG environment.    Do not worry about this.  The color that will appear as the background for your content when you publish is the color you selected for the EZRound table.

The NOF WYSIWYG environment is unaware of the color you used for the EZRound table (since we are loading it as raw HTML in the MasterBorder) and is unable to display it.

If you add color to the background of a Region or Text Box, it will display properly in the NOF WYSIWYG environment.

Here is a screen shot from the NOF WYSIWYG environment while this page was being developed. You can see that the background color appears during the page design - but the background as you look at this page is white (the color selected for the EZRound table).

A screen shot from the WYSIWYG with a background color set

That is all there is to setting a different background image behind the EZRound container!

[Home] [Creating a matching EZRound design] [Importing the  EZRound slices] [Setting the Site Syle MasterBorder] [Cloning the Home Page MasterBorder] [Using Background Images and Colors] [Colored Backgrounds] [Repeating Backgrounds]