Erasing old CSS on imported website

I’m back after a 10-month hiatus while I dealt with other crises. I have successfully imported my giant website (1829 pages, mostly text with some imagery). Hooray! I never expected a perfect import process, and there are indeed a few hitches.

The site was built with Sandvox and I have stubbornly stuck with Sandvox more than ten years after it became abandonware, so I’ve got some big hurdles to leap.

The first hitch is that the background image from the website did not import properly. I attach a double image. The upper image shows the page as it correctly appears; the lower image shows what I got after Sparkle imported it. As you can see, the background image has somehow been greatly enlarged and pasted over everything else. I messed with the “Page” tab, setting the Background Content to “Custom Pattern” and attached an image to that, but it had no effect, despite my fiddling with the “Scale” slider.

So the question for now is, how do I eliminate that grossly expanded background image from the old website?

Hello :wave:t2:

The issue comes from the fact that, on your original site, the background image was set to repeat based on the height of the page. Sparkle doesn’t handle this the same way. To put it simply, Sparkle recognizes that there’s a background image in your box, but it doesn’t understand that it should repeat to fill the entire height. As a result, the image is stretched to cover the full height without repeating, which causes this zoomed effect.

If you click on the background image (of the box, not the page) in Sparkle, you’ll see in the “Style” tab that it’s wide but not very tall. Sparkle tries to stretch it to match the height of the page without repeating. You can change this by selecting “Custom Pattern” in the “Content” section. This will make the image repeat, but it will repeat both vertically and horizontally, which may not give you the same visual result as on your original site. To answer your question, you can remove the background image from this section as well.

If you really want to keep this background, one solution would be to use a design tool (like Photoshop or Affinity Designer) to create a very large image where you duplicate your pattern several times, stacked on top of each other. You can then use this large image as the box background in Sparkle, and any excess will be automatically cropped. However, this isn’t ideal, as a large image will increase the page load time, and you would need very large images if you have particularly long pages…

(Translated with AI)

2 Likes

Thanks much for that explanation! That makes perfect sense and shows me how to proceed. It moves me to a new problem, but I will do my research in the documentation before asking for help here.

Thanks again!

2 Likes

What @Allan said, but could I suggest a background like that image behind text a User will want to read would be very distracting…

3 Likes

Agreed!
Fashions in websites come and go.
Background images are passé at this point.
Also out of style now are images with rounded corners. To some extent, sites with multiple layers which were all the rage a few years back are also fading away.
And how about jiggly animated gifs? Remember how cool they were? 20 years ago?!

Knowing that your site is over ten years old confirms that it’s time to move on.

A clean white background makes a text heavy site much more legible and less likely to lose viewers.
Try white. Save yourself a lot of hassle. Save the eyes of tour visitors.

Dave
Cape Cod

4 Likes

I recently added a couple of highly animated gifs to my site. Old habits die hard :laughing: