When all else fails: Tiling Backgrounds for Dummies (Non-Coders)

[gwpriester]

OK I can not code to save my life. That stuff makes my brain spin. I spent an entire day trying to get Acorn's method to work using a svg tiling image. No luck. At all.

So here's the easy way, and click here to view my SAMPLE BACKGROUND.

1. Create your tiling image.
2. Create a bitmap copy, 96dpi, 16 colors, no dithering, no transparency.
3. Open the Bitmap Gallery. Select the bitmap tile. Click Background. Select Set Page or Set Pasteboard Background.
4. Done.

Fast. Effective. No programming required.

[Acorn]

OK I can not code to save my life. That stuff makes my brain spin. I spent an entire day trying to get Acorn's method to work using a svg tiling image. No luck. At all.

So here's the easy way, and click here to view my SAMPLE BACKGROUND.

1. Create your tiling image.
2. Create a bitmap copy, 96dpi, 16 colors, no dithering, no transparency.
3. Open the Bitmap Gallery. Select the bitmap tile. Click Background. Select Set Page or Set Pasteboard Background.
4. Done.

Fast. Effective. No programming required.

Gary, I did describe this approach to rolling your own in my Thread.

I do not think placing a 96dpi image as a background is however especially satisfying.
I prefer the crispness of the SVG and a vector/text presentation.

Horses for courses.

I took your design and created a vector of it as here: ggg.xar

I did follow your method by creating a Bitmap copy, cropping that to the smallest repeating pattern.
I did resize slightly to 80px wide as Xara does not appreciate fractional pixels.

My main difference was I set it to 600dpi and Alpha.
The file size increase is minor.
You can then easily drop any colour on the pasteboard.

Acorn

P.S. There are no dummies in TG, just people with different aptitudes.

[gwpriester]

I appreciate all of that. But the average person visiting a website is probably not going to notice how sharp the background pattern is. And even if the background is razor sharp, if the content is not good, or the design bland, and the navigation impossible, it's all for naught.

[Acorn]

I appreciate all of that. But the average person visiting a website is probably not going to notice how sharp the background pattern is. And even if the background is razor sharp, if the content is not good, or the design bland, and the navigation impossible, it's all for naught.

Why ever just do half a job?

Acorn

[Initiostar]

Acorn's proposition works, but what appears not to work is uploading a XAR document to TG (that includes SVGs in index-htm-files) - When I published a working XAR with SVGs it gives this output: https://initiostar.co.uk/demo/svgtest/. However, when I upload the same XAR here: SVG -Acorn Backdrop.xar, it seems that the SVGs have been converted to PNGs when you preview the uploaded XAR - therefore if you simply preview the TG uploaded XAR, it does not show the background you would expect unless you re-add the SVGs to index-htm-files.

Seems strange and maybe my error, but the principle is straight forward, unless of course you have the same problem I found.

Anyway here's a single SVG background that works for me: https://initiostar.co.uk/demo/svgBg/

Gary

[gwpriester]

Now this works for me though you need to make the tile a placeholder and link to replace with the .svg file it in the index_htm_files folder

[gwpriester]

Shall we make this a challenge to create an interesting and unique tiling background?

[Acorn]

When you make a Placeholder of an SVG and save the design file, the XDA creates a <designFileName>.XAR file and also a <designFileName>_xar_files folder.
When you then Preview, Export Website or Publish, the contents of <designFileName>_xar_files folder are added to the newly minted index_htm_files folder.
This is how Xara handles external content but it is little explained anywhere.

To get a XAR file to render any SVG, you must relink the Placeholder > Replace with graphic file OR ensure the folder is saved with the XAR.
If you rename a XAR and it has a linked SVG, the external assets folder is automatically renamed.

These linkages can point anywhere as Xara ensure the files are copied into the folder regardless.

When uploading into TG, ZIP design and asset folder together.

Don't ask where the assets are before you save the design.
Well, there you go, you did.

Your XDA creates a temporary folder, C:\Users\<windowsUserName>\AppData\Local\Temp\Xara TempSupportFolders\2d316c01-0671-42d1-bcc9-160ee50dc986_files\<designFileName>.XAR; the XDA generate a different GUID (the <alphanums>_files for each session).

---

@Initiostar, your box.svg background-size: 15px 15px; could be replaced as background-size: 0.78125vw 0.78125vw; - try that and see what happens when you Zoom the browser.

---

My winning SVXv17Logo.zipG tile has to be: Xv17Logo.zip

[gwpriester]

I noticed something while playing with the other Gary's code, the second number does not appear to do anything; delete it and everything still works; and it you end the number with a coma instead of a semi-colon this small change changes the size of the repeating pattern.

[gwpriester]

OK My entry in the seamless tiling background challenge. http://gwpriester.xara.hosting/tiling-svg-background/

I discovered why my first attempts were not tiling. I had clipped (Apply ClipView) the images that extended beyond the tile. But the SVG file considers these space even though they are not visible.