Better Tiling Backgrounds

[Acorn]

The Online Content Catalogue > Backgrounds > Tiling Backgrounds offers 61 squares that can be picked as the Pasteboard background.
... > Gradient backgrounds, why, has all of three choices!

As such these are limited to two-tones (with a couple of tints, if you are lucky).
There is no sizing, other than remove Tiling and Fill browser window, where you can see how grainy the resolution is.

There are a couple of benefits in that the two-tone colours have their own Themed Colour Names: Website Backdrop & Website Backdrop 2 (WB & WB2). Making you wonder what happened to Website Backdrop 1?
These can be matched to your site theme quite easily
You can also adjust its Light & Dark Contones through Pasteboard background Edit Pasteboard colour.

EXTENDING THE XARA EXAMPLES
You can construct your own version:

1. Create a vector design. Colouring at this stage with a rainbow if needed.
2. Convert it with Create Bitmap Copy. Scaling as required.
3. Set as pasteboard background.
4. Include two shapes with Named Fills of Website Backdrop & Website Backdrop 2. If the colours are important create another pair but ensure the colours have separate Names for their colours. If not important, I usually add them into a Linear Fill of the Page background to maintain a running theme.
5. Design your Page background.
6. Save the file as xarabackground_<meaningful_description_here>.xar.

You can now drag this file onto your current design and the Pasteboard and Page backgrounds are replaced.
Press Accept to Match colours or you get duplicated Names colours.
Keep the two-tone colours if already set in your design or adjust the Name Colours, WB & WB2 to the values of the added other Named colours.

That's it. You have jumped from 61 tile patterns to as many as you like.
Do offer up your designs in this Thread; they will be appreciated.

---

Here are a number of approaches I use.

METHOD 1
Leaving aside the repeating pattern aspect, many will have realised you can roll your own:

1. Create a vector design. Colouring at this stage with a rainbow if needed.
2. Convert it with Create Bitmap Copy. Scaling as required.
3. Set as pasteboard background.
4. Adjust Contone.

Tweak a colour, transparency, feathering? Redo all the above steps.

METHOD 2
Gradient backgrounds are simpler to develop.
Unlock the Pasteboard background layer, (lose any Shadow) and simply apply a Linear of Radial Fill.
Throw in a couple of Stops, colours and change alignment.
Do check you have not generated an image in the process; usually by throwing in a transparent colour as one of the Stops.

You can create a range of images and as they are available in the Bitmap gallery, you can cycle through them all (Set pasteboard background).
Provided they are retained in your design. If they are not on the page, you lose them when the XDA is closed.
I cannot recall a setting to retain the Bitmap gallery contents and I would have it off anyhow to avoid bloat.

But hey!, we have bitmaps as backdrops in a vector program.

1. Only Xara numbered bitmaps, no Named JPEGs, PNGs or WebPs.
2. Still no scaling though.

VECTOR BACKDROPS
In a nutshell:

1. Create a vector design.
2. Save as SVG file.
3. Create a Placeholder > Replace with graphic file: <Step_2_filename>.svg.
4. Build up Website HTML Code (head) CSS for separate pages (.xr_bgb0, .xr_bgb1, etc); replace with html (or html, body or just body) for the entire website.

The example file has two pages with similar but slightly different coding to show how to pad (H or V), scale (fixed or browser width (px or vw units)) with a linear gradient thrown in.

1. Named SVGs. Small sized and no bloat and can be put off-page or even deleted as they now exist in a linked folder.
2. Many ways to scale. These are technically friezes. You can create true wallpaper coverings if you have the skill.

SVG - Backgrounds.xar

I hope you find the sampler interesting or even inspiring.
Do tell.

Acorn

[gwpriester]

FWIW. I created the tiling background patterns about 6-10 years ago. I am not sure why they had to be two colors.

[Acorn]

FWIW. I created the tiling background patterns about 6-10 years ago. I am not sure why they had to be two colors.

Gary, AFAICT, Xara uses the two Named Colours and applies them as dark and Light Contones.

So you can get something like this quite easily:

Two colour with shades in-between and white as well.

Two colours and lores bitmaps.
I can hear the sniggering.

Here is a concept model for an SVG design: SVG - Packed Coloured Cube Background.xar



Acorn

[gwpriester]

My background image (a little more subtle than yours) is 158 x 158px. What changes to your script do I need to make it repeat seamlessly. And on a white background which is ffffff

[Egg Bramhill]

Okay Acorn, trying to hang onto your coat tails. Not 100% following you but I'm getting there slowly. An svg example:

LINK

[gwpriester]

Egg created a guest tutorial a million years ago on how to create a tiling background. Unfortunately my browser will not let me go there because the certificate has expired.

[Acorn]

My background image (a little more subtle than yours) is 158 x 158px. What changes to your script do I need to make it repeat seamlessly. And on a white background which is ffffff

Gary, I was using primary colours for emphasis not subtlety to show it had 9 colours and was not using contones.

The code changes would be:

<style>
html {
background-color: #ffffff;
background-image:
url(index_htm_files/gwp.svg);
background-attachment: fixed;
background-position: center center;
background-repeat: repeat;
background-blend-mode: normal;
background-size: 158px 158px;
}
</style>
where I have guessed your SVG to be named gwp.svg.

Here is a full design built from your bitmap: SVG - gwp Backdrop.xar
Here is its SVG: gwp.svg

Your bitmap as a backdrop:

My SVG one:


Acorn

[gwpriester]

I'm getting this:

[gwpriester]

I published the background test to a folder on my desktop. When I select the index.htm file after a few seconds it shows this message. What's this all about?

[Acorn]

I'm getting this:

Pretty, but not anything I built or supplied. A typo somewhere.

Here is a better design as it separates shapes from glyphs: SVG - Improved gwp Backdrop.xar

The SVGs to link are:
cheese.svg
gees.svg
that are 3kB size in total.

Everything linked and ready to run: gwp.zip

The new approach keeps the gs as text and there is only one cheese-holed shape to worry about.

Also you can change the background-colour in the CSS to anything and it shines through.

Acorn