How to tile a box image

Question
1

I’m back again with another newbie question. I begin by testifying that I have done my homework by searching through the documentation as well as the fora here for answers, but I suspect that I’m not using the right search terms to find what I need (I used ‘tiling’ and got lots of hits for ‘styling’, ‘billing’, ‘talking’, ‘sizing’, etc).

First, I’d like to express my admiration for the abstraction used in Sparkle. The most difficult problem in software design is figuring out how best to abstract the problem so as to make something that is understandable, usable in practice, and computable. I’m just beginning to learn the Sparkle abstractions, but they strike me as higher-level abstractions than what I have seen with other website editors. But I’m quite the curmudgeon; be assured that someday I’ll be back with bitching and moaning.

Now to my actual question: my website has a tiled background. The base image is 1240h x 78v, and is automatically tiled (repeated vertically) to fill the page. But alas, Sparkle, when importing this, decided to skip the tiling and simply expand that image to fill the box. So my question is fairly simple: how do I tell Sparkle not to stretch the image, but to tile it?

1 Like
2

Hi,
i hope this helps: https://sparkleapp.com/docs/images.html

The “Fit” button ensures the entire image is visible, but will produce a horizontal or vertical letterboxing. “Fill” ensures the image covers the entire frame, but the image will be clipped at the frame edges.

3

Rats! That didn’t help. I carefully read the “Images” page in the documentation. I’m impressed that Sparkle can remove backgrounds, but nothing there solves my problem. You see, I apply this background to all the pages on my website. Some of those pages are short vertically and some are long vertically. Therefore, I cannot use a single image for the background; it has to be tiled.

Here’s the CSS code that tiles the image on the Sandvox version of the website:

body.no-sidebar #page {
background: white url(background_no_sidebar.png) repeat-y;
}

Here “background_no_sidebar.png” is the image containing the background, which is 1240h x 78v.

So the big question is, “Is there any way to do something similar to that CSS code?”

4

Had a similar question on our support email, perhaps it was you?

Anyway for posterity, tiling images is done via “patterns”, which you can set on the page background or as the filler for a box.

The pattern is always repeated in all directions though, not just vertically.

5

It probably was me, but I have a memory like a steel sieve, so I can’t recall.

I had found patterns earlier and tried to play with them, but got nowhere. However, I did some further playing around and discovered that I must change the fill on the box to “transparent”. An obvious newbie mistake. I still have a long way to go, but I’m over this brick wall and will continue playing.

Thanks much!

6

You’ll need to use ‘Custom Patterns’. Leave your background image (1240x78px) on the desktop or anywhere on your hard drive that you want to store it. With nothing selected in Sparkle, click the ‘Content’ tab at the bottom of the menu on the right hand side and select ‘Custom Pattern’. A little square will pop up. Click on the square and then click ‘Add’. Navigate to your background file wherever you stored it. Click ‘Select’.
Underneath the square in the menu are a couple of options. Use the scale option to manipulate the background to fit as you want it.

Hope that works for you!

2 Likes
7

I managed to figure it out about three hours before you posted. Thanks for the explanation. A million Erasmus’s with a million copies of Sparkle on a million Macs will eventually get this website working…