Seamless Tiles

A Menu of Examples

Home page > RefInfo menu >

Computer topics menu (WebDev section) >

This 'Seamless Tiles' Links-to-Examples page

! Note !
More tiles may be added ---
if I re-visit this page someday.

< Go to the Table-of-Contents (menu), below. >
(Skip the following Introduction.)

INTRODUCTION :

Below are links to web pages of seamless-tiles that can be used as backgrounds --- for example, for

  • entire web pages --- via
    a background-image parameter in a 'body' statement

  • entire tables within web pages --- via
    a background-image parameter in a 'table' statement

  • table cells within tables --- via
    a background-image parameter in a 'td' statement

  • paragraphs in a web page --- via
    a background-image parameter in a 'style' statement for the 'p' element

Most of these tiles are less than 300x300 pixels in size, so that they tile across a typical screen background at least 3 times.

These tiles are arranged into (about 35) categories such as:

  • Abstract
    ( no strong suggestion of animal, vegetable, mineral, nature ; 2D rather than 3D )
  • Bark
  • Brick
  • Bumpy-Rough
    ( 3D-like , shadows )
  • Bumpy-Smooth
    ( 3D-like , shadows )
  • Clouds
  • Embossed
    ( mostly gray shadows on white )
  • Etched/Gouged/Carved Surface
    ( 3D-like , shadows )
  • Fabric
  • Gradient
  • Ice
  • Leather/Skin
  • Leaves/Mulch/Grass
  • Lightning
  • Metal
  • Money
  • Mud
  • Music
  • Paint
  • Paper/Cardboard
  • Pattern
    ( a 'strong', clearly-repetitive pattern,
    like wallpaper patterns, over invisible tile edges )
  • Plaster/Adobe/Stucco/Concrete
  • Pocks
    ( pock marks, small craters )
  • Ripple
  • Snow
  • Sports
    (especially tennis)
  • StoneRough
  • StoneSmooth
  • Swirls/Spirals
  • Tiles
    (like actual bathroom tiles or floor tiles)
  • Water
  • Wood
  • Other (for some tiles that do not fall into the above categories)


In many cases, a seamless-tile could fall into multiple categories. For example, a seamless-tile that looked like drops/puddles of paint could be classified under

  • Paint, or
  • Bumpy-Smooth
or a seamless-tile that looked like stucco (a sandy, plastery kind of surface) could be classified under
  • Plaster/Adobe/Stucco/Concrete or
  • Bumpy-Rough

For the most part, a seamless-tile in this 'library' will be put in only one category --- but a few exceptions may be made: if a tile seems quite useful (of appealing quality) and it seems to fit 'soundly' in either category.


How to use these pages of seamless-tiles :

When you go to one of the seamless-tile pages, you can simply scroll down the page to look at the tile images.

Underneath each tile image is the text phrase 'tiled webpage'. Click on that link to bring up a simple HTML page that shows the tiled image --- with some black text over the tiled image. This gives you an idea of how the seamless-tile will look when actually 'tiled' across an area --- and how dark text would look when super-imposed on the tiled image.


By holding the mouse cursor over the 'tiled webpage' text, within a second, you may see a popup that gives the descriptive filename. (This works in most web browsers.)

The filename is also at the top of the window showing the 'tiled webpage'.


You can right-click on a seamless-tile image and choose to save the image file ( jpg, png, or gif ) on your computer.

    Up to 2019, most of the seamless tiles here are available as JPEG files. In the future, I may convert most of the tiles to PNG files --- which may be more suitable for scaling up tiles to larger sizes.

    One problem with JPEG files is that they use a DCT (Discrete Cosine Transform) compression algorithm which results in 'mosquito noise' in some cases. This problem is discussed at a JPEG vs PNG vs GIF page at www.freedomenv.com.

    Briefly, JPEG is a 'lossy' format, but PNG is capable of 'lossless' image formats. Some PNG formats are more likely to support fairly high quality scale-up of images --- which may be needed to support higher and higher resolution screens.


File naming :

Meaningful names were given to these tile files. The names are intended to give some idea of what the image, rendered from the file, looks like.

Example 'classifier' words used in the names:
'clouds' or 'bark' or 'brick' or 'metal' or 'stone' or 'water' or 'wood' or 'texture' [meaning 3D-like, that is, having shadowing, usually subtle] or 'pattern' or 'abstract' or 'embossed' or 'gradient'.

Some example 'modifier' words:
'bright' or 'light' or 'faded' or 'aged' or 'real' or 'realistic' or .... ; 'gray' or 'blue' or 'beige' or ...


Colors are usually the last modifier in the filenames because, in a sense, they are the least important part of the image description. This is because you can take the tile into an image-processing program, like 'mtpaint' or 'Gimp', and change the color drastically.

In the 'mtpaint' program, the color changing options are under 'Effects' in the top toolbar. Two quick ways to change the color is with 'Invert' and/or with 'Grayscale'.

A couple of the tiles below were created with 'Invert', which makes light colored tiles from dark ones. One tile was an astronomical photo of stars against the black void. One tile was a black rubbery looking image, which when inverted, gave a light-colored blubbery looking tile.


Improving the tiles :

These tiles may be altered some in the future as I use them myself and find things to change. For example, if a tile seems a little too dark, I may use a paint program like 'mtPaint' to 'gamma-correct' the image.

In fact, if you are using black text over a tiled background image, you will find that images with high contrast (very dark areas on light areas) are not good to use. The text will be nearly unreadable when on the dark areas.

Even when the dark areas are small spots, they can be quite a distraction and still make the text almost unreadable.

You may be able to 'salvage' such tiles by taking them into a paint program, like 'mtPaint', and pixel-editing or brush-smudging the dark areas to make them lighter --- when simple gamma-correction won't work.

Most of these tiles are rather 'light' colored --- to allow for reading dark text that might be placed on the tiled background. But I may add darker tiles in the future.


Making tiles from non-tile images :

A few of these 'tiles' (mostly in the 'Wood' category) are not really 'web tiles' because the edges do not mesh precisely when repeated across and down a page. But I have included some that are appealing and that could probably be converted into self-meshing tiles.

There is a technique for converting images into seamless-tiles. A popular technique involves quartering the image, re-arranging the four pieces, and 'smudging' the new, non-matching boundaries to make them blend together.

Here is a local page on HowTo make seamless-tiles.

Of course, images with the same solid color around the edges of the image are good candidates for tiles. No editing necessary --- unless you want to adjust color, brightness, trim the margins, or other such simple, quick adjustments.

Generally you do not want the image to be 'too busy', and you do not want there to be huge contrasts in the image (very dark areas and very bright areas) --- unless you are going to use the tile around the periphery of your web page, by putting your text in blocks having their own suitable background.


Personal note(s) :

The tiles are presented here mostly for my own personal use --- as a reference, especially when away from home, on a netbook computer, working on or designing web pages.

These pages are meant to be an organized archive, organized according to my way of thinking about categories of tiles.

Making these pages has forced me to devise a categorization scheme for the basic types of seamless-tiles --- according to my way of thinking (at the time of categorization).

No doubt there are other (and better) categorization schemes. [A biologist or zoologist could probably come up with a very rigorous scheme --- similar to the way birds and insects and mammals are categorized.]

In fact, if I had made this web page in a different month or year, I probably would devise a different categorization scheme myself.


Seeing all the tiles, quickly :   (size matters)

I would put all the tiles on one (or a few pages) so that one could simply scroll down the page to see all the tiles --- but, it turns out, such a page would take a long time to load, even on a very fast Internet connection.

Even though many of the tiles are rather small (some less than 256x256 pixels), the hundreds of tiles really add up to a huge image size.

    And as screen resolutions increase from about 1024x768 pixels to 4000x3000 pixels and beyond, in order to see the details of tiles, we are seeing the need for tiles on the order of 512x512 pixels and larger.

As an alternative to multiple pages of tiles, someday, I may add a link, on this page, to a slideshow page to show all of the tiles, sequentially. But that may be too tedious to wade through.

Another alternative would be to make tiny thumbnails of the tiles (about 60 pixels high) and show a page (or two) of thumbnails --- with links to the actual-size tiles. However, the features of many of the tiles will probably not be apparent in the thumbnails.


Other sources of seamless tiles :

To find some sources of free (contributed, open source, public domain, or Creative Commons) seamless tiles, you can do WEB SEARCHes on keywords such as

One source that I found in January 2019 (without lots of popup ads and without registration requirements that want your email address and other personal information) was www.outworldz.com --- the 'seamless textures' section. This site offers many Creative Commons seamless tiles.


Links to other Web Graphics info :

On this site, there is a page of 'external' web links for web page development. Some of those links, under the topic of 'graphics', offer sources of graphics files (such as textures) that may be suitable for use as seamless tiles 'as is' --- or may be suitable for conversion to seamless tiles. (See the how-to-make-seamless-tiles link above.)

Table of Contents:

(links to category-pages
of sample seamless-tiles)


Some of these categories may overlap --- for example, it may be difficult to decide if a tile should be classified as a 'Swirl' or as 'Abstract'.

For simplicity, each tile is (usually) placed in only one category. For example, if a tile doesn't look particularly 'swirly', it may be put in the 'Abstract' category, instead of in 'SwirlsSpirals'.

End of Table of Contents.

Bottom of this
Seamless Tiles - Menu of Examples page.

To return to a previously visited web page, click on the Back button of your web browser a sufficient number of times. OR, use the History-list option of your web browser.
OR ...

< Go to Table of Contents, above. >

< Go to Top of Page, above. >

Page was created 2010 Mar 26.

Page was changed 2011 Jun 06.

Page was changed 2018 Nov 07.
(Added css and javascript files to try to handle text-size for smartphones, esp. in portrait orientation.)

Page was changed 2019 Jan 10.
(Added some web search links.)