Graduated background (outside the page)

[johne53]

Take a look at this web page. Depending on your display resolution, you'll probably see a white page with a graduated blue background. If you resize the width of your browser, the white page stays the same size but the amount of visible blue background increases or decreases to "soak up" the extra width. I think this is a good idea because it prevents a white page from looking "lost" if the user has a hi-res monitor. Is there a way to achieve the same effect in Xara?

[covoxer]

Open:
Main menu / Help / Xara Web Designer Help...
In the Contents tab:
Getting Started / Website Colors / To Careate a Graduated Color Background

[gwpriester]

You could probably accomplish this by creating a very long page. Apply a bitmap fill with a gradient as the page background (from the Bitmap Gallery, select the gradient filled bitmap and press Background).

Place a rectangle over the page with whatever color you want, and add your content.

The page background will repeat and fill the screen. The rectangle with your content will be centered on the screen.

[johne53]

I almost got this to work by following the Help instructions (i.e. creating a long, narrow rectangle, giving it a graduated fill and then setting it as a repeating background. The only problem was that each repeat was separated by a small white gap, so I guess I must have had an outline to the rectangle. The small white square (extreme bottom left of XWD) shows "no color" for the rectangle's outline but I guess I need "no outline" rather than "no color". How do I remove a rectangle's outline?

[cursor]

How do I remove a rectangle's outline?

You can remove the outline of any object by first selecting the object, then clicking on the Clear Color icon at the far left of the color bar. From the popup menu, select Clear Line Color.

[johne53]

Thanks for the tip but here's the effect that I'm getting if I set the outline to have no color. I think I need to remove the actual outline, rather than have a transparent outline.

[Soquili]

Hi John,

Curtis' tip is how you remove the outline in Xtreme and Web Designer.

You should notice the Set Line Width option on the toolbar, when you remove the outline as described by Curtis (cursor) you will see that the line width changes to None. This means there will be no outline on the shape.

[ss-kalm]

Also, make sure that the rectangle you are creating is full pixel sizes ...

[johne53]

Yes, you're right. I think I see what the problem might be. The instructions make a point of emphasising that the rectangle needs to be an exact number of pixels wide. I typed 16 pixels but I now realise that you can't enter a width by typing. The actual width is 15.8 pixels. How can I set it to be an exact number?

[Soquili]

John you can set an exact number of pixel by typing. Sometimes it will round itself but retype the number and it should take.

If you have the Lock Aspect Ratio (small lock icon) enabled the height will change according the the new width. You can unlock the aspect ratio to change width and height but that can make an image look odd. Do not do it with text areas, that can cause other problems.