How to Use a Free Tiling Background on Your Desktop or Website

Most of the backgrounds on SL-Designs are tiles: small pictures, usually 200 × 150 pixels, drawn so their edges meet without a seam. Repeated side by side, one tile fills a whole screen or web page with a pattern, and the file stays tiny.

1. Download the tile

Open any background page and press Download. The button saves the original file, exactly as Stella made it.

2. Set it as your desktop background

1. Windows 11: open Settings, then Personalization, then Background. Choose Picture, browse to the file, and set “Choose a fit for your desktop image” to Tile.
2. Mac: open System Settings, then Wallpaper. Add the file as a photo, then choose Tile from the pop-up menu next to it.

Animated tiles move on a web page, but a desktop background shows them as a still picture.

3. Use it on your website or blog

Upload the file to your own site first. Please don't link to the copy on SL-Designs; the Terms of Use ask you to host images yourself. Then point your page's CSS at it:

body {
  background-image: url("/images/my-background.gif");
  background-repeat: repeat;
}

background-repeat: repeat is the default, so that line only makes it explicit. To keep the pattern still while the page scrolls, add background-attachment: fixed;. Many website builders and blog themes also have a background image setting: upload the tile there and pick the repeating (tiled) option if the theme offers one.

Some tiles to start with

Three abstract pattern tiles, including the blue one at the top of this post. Open one to see it fill a whole page before you download it.

For more, browse Patterns & Shapes, Hearts & Stars and Colorful Backgrounds, or the seasonal collections under Holidays & Occasions.