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

Quote:

---

Originally Posted by 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.

---

Size isn't everything!

If you have a large SVG then background-size: auto auto; returns it in its intrinsic dimensions.
If you omit the second auto, auto is assumed.
So if you just set (15px) you are actually telling it (15px auto); the auto here is saying use the intrinsic ratio to calculate the height given the dimensioned width..
A comma is to separate adjacent SVGs that are being rendered together so (15px, 15px) is actually ((15px auto), (15px auto)) & if there actually is no second SVG the second pair is dropped.

Other Gary has changed his code to (0.78125vw), which is (0.78125vw, auto) or (0.78125vw, 0.78125vw). 'vw' is viewport width and a value of 100 would be "fit to the width of the browser". This strange value is actually saying repeat across the browser 128 times. If you drag the browser wider, you still get all 128 boxes, only bigger.

Acorn

I noticed today, and maybe I am slow — it's probably been around for some time — that when previewing my sample page, Ctrl + scrollwheel zooms in and out and Firefox shows the percent of zoom in the address bar, which is useful for returning to the actual size.

Quote:

---

Originally Posted by gwpriester

I noticed today, and maybe I am slow — it's probably been around for some time — that when previewing my sample page, Ctrl + scrollwheel zooms in and out and Firefox shows the percent of zoom in the address bar, which is useful for returning to the actual size.

---

Gary, all my browsers have this and a Reset which I have put to 120%as my default. I zoom all the time.

Acorn

As I said, I'm slow. Comes when you are considered to be "elderly."

Did you see my attempt http://gwpriester.xara.hosting/tiling-svg-background/

Quote:

---

Originally Posted by gwpriester

Did you see my attempt http://gwpriester.xara.hosting/tiling-svg-background/

---

Gary, I did.
Sharp at 510% with no visible joins.

On the clipping, I did mention a clip and then a second Bitmap copy.

Acorn

Thanks for sharing Acorn,

https://initiostar.co.uk/demo/svgBg/

OK 100/128 is 0.78125 - made me think! Interesting effect - the background now scales with Scale-to-it-Width, but maybe not uniformly? The effect gets a bit lost with the mobile variant, but works. I am guessing you could use @media rules to have a different scale on a mobile device?

Using background-size 15px worked OK across both variants too.

Thanks for the ideas.

Gary