Graduated fill in background of html export

**snicho** · 15 July 2008, 02:20 AM

I have been having some success with generating html pages to date.

However, I just noticed that setting up a background (on the background layer) with a simple linear graduated fill, doesn't export at all.

If I keep the background fill flat, then it exports fine to html.
If I place an object on the page and fill it with a linear graduated fill, then it exports as expected to html.

Any ideas how I can get around this so that I can have a graduated background for a webpage?

-steve

**snicho** · 15 July 2008, 03:00 AM

OK. Silly me ...

A bit more thought and I realise that setting a background colour in XXP, then exporting it, just sets the background colour in the html <body> parameter style="background-color: #FFFFFF"
So there is no way that a graduated fill can be translated to this.

The only way aroudn this would be for the background to be exported as a background image instead. But I can't see this being an option within XXP, so I guess it's down to an html editing level.

Unless I'm missing something?

**ss-kalm** · 15 July 2008, 03:38 AM

From Xara Help Files:
To set a background image, select it in the Bitmap Gallery and press the Background button. This image will tile, that is repeat, in the web browser.

So if you create your graduated background (one pixel deep by the width you want), save it as a bitmap and then use it as a background that should work

**steve.ledger** · 15 July 2008, 04:28 AM

Snicho, Keith is spot on. Also remember you can create you 1pix tile vertically as well.

See attached .xar (export it as HTML)

It is also possible to edit the exported .htm in notepad and point it to another tiling image if you wish. However, if you make changes in Xara later and re-export, you will need to repeat this step again.

<body style="background-image:url('index.htm_files/0.png')" onload="rx()">

**snicho** · 15 July 2008, 07:24 AM

Thanks Keith and Steve.

Yes, the concept of a 1pix wide image that fades from the top to the bottom of the page, and repeats across the page, is exactly what I want to achieve.

You've both set me on the right track. I'm sure I can do this now.

Thanks,

Steve

**gwpriester** · 15 July 2008, 12:43 PM

A picture is worth...

**ss-kalm** · 15 July 2008, 12:49 PM

If you make the graduation from dark to light and back to dark, if due to page sizes it tiles, you won't get any odd effects like a sudden light to dark transition.

**snicho** · 15 July 2008, 01:35 PM

Yes Keith, that's a good point.

I guess that the only issue then is how long (tall) to make the 1pixel wide image - and that depends on the expected screen resolution that the site is targeting.

- but that's a whole other thread ...

Thanks for all your input. All sorted now.

Cheers.

-steve

**steve.ledger** · 15 July 2008, 06:08 PM

Originally Posted by snicho

I guess that the only issue then is how long (tall) to make the 1pixel wide image - and that depends on the expected screen resolution that the site is targeting.

Not at all.
The height of your webpage is governed by the height (tall) of the page size you choose when designing the webpage in Xtreme in the first place. Page scrolling in the browser stops when the html tag closes.
If your 1px wide graduated tile height is the same as the page height (as my attached sample in my earlier post showed (if you checked the bitmap gallery) then screen resolution of any PC will make no difference to the height your page is viewed at any resolution.

**snicho** · 16 July 2008, 12:53 AM

Steve - don't you ever sleep??

Not quite sure I entirely agree.

What I meant was ...
If the page is designed for (example) a height of only 600 pixels and is then viewed on a higher resolution monitor, then more of the background image will be visible.

So how/where the graduation is implemented on the background image itself will impact on how effective it is when viewed on different resolution monitors.

If the page is designed to be taller rather than wider, then yes, any user will be able to see the changing graduation as they scroll down.

If the page is designed so that there is no vertical scrolling, then the graduated background needs to be considered differently.

I think that make sense? (I've only just finished my first coffee for the day.)

(hope we are not talking at cross purposes here)

-steve