Tiling images - an overview of the principle

An image that can be copied and then have that copy abutted to the edge of any side of the original image and appear seamless (without any apparent edge between the images) is referred to as a tileable or seamless image.

Below is an example of a tileable image. There are nine identical images below. When they are joined together they appear to be one image. This is because each edge of the original image will blend into any edge of a copy of itself (if it is not rotated).

This type of image can be accomplished with some work using the Photoshop menu's Filter > Other > Offset

Resources & information about backgrounds and textures

NOTE that I am providing the following links as a service. However, I do not endorse, nor am I responsible for, the content at the following sites or any use made of them. Use them at your own risk. I did not create the text used for the names used for the links, therefore terms such as "Free" need to be confirmed by you, the user of the links. Your use of them is your responsibility and done at your discretion.

  1. Seamless image resource
  2. Free Textures from TextureKing
  3. Free High Resolution Textures - Lost and Taken
  4. Smashing Magazine - For Professional Web Designers and Developers
  5. Free Tutorials - Free Web Design and Web Programming Resources - articles, tutorials, tools, ideas,
  6. Free Webmaster Tutorials - Quackit.com
  7. Free Website Designing Tutorials & Resources
  8. Create Seamless Web Background Textures in Minutes | Design Shack
  9. Textures.com - Textures for 3D, graphic design and Photoshop!
  10. Free PSD Files - Free PSD Files, Templates, Graphics, Flyers , Business Cards
  11. Multiple Backgrounds with CSS
  12. Webtreats - (FYI, start with these Terms of Use ยป WebTreats)
  13. 10 Free Background Textures for Websites
  14. CSS Gradients with "background-blend-mode" property (no IE support thru v.11)
  15. PatternBolt
  16. Dev.Opera โ€” Getting to Know CSS Blend Modes
  17. Responsive Full Background Image Using CSS
  18. GREAT! (per danv) Free images, web templates, brushes, psd graphics, photos, art, LOTS more
  19. Tile-able Website Backgrounds - Free Web Gallery
  20. Free Seamless Textures | Tileable Backgrounds and Repeating Patterns
  21. Subtle Background Patterns | Free textures for your next web project.
  22. Stripe Generator - ajax diagonal stripes background designer
  23. Mastering CSS3 Multiple Backgrounds
  24. Multiple Backgrounds with CSS3
  25. CSS3 Backgrounds
  26. Using CSS multiple backgrounds - Web developer guide | MDN
  27. Stacking Order of Multiple Backgrounds | CSS-Tricks
  28. Multiple Backgrounds with CSS3 - CSS3 . Info
  29. Scaling background images - Web developer guide | MDN
  30. All-free-download.com
  31. Web Developer's Handbook | CSS, Web Development, Color Tools, SEO, Usability etc.
  32. For Web Designers - Website Design Resources
  33. Background Textures and Images Library, Free Download - GRSites
  34. Design Tips, Tutorials and Inspiration - Hongkiat.com
  35. CSS Backgrounds and Borders Module Level 3
  36. 100+ Seamless Patterns Great for Creating Website Backgrounds | Web Design Ledger
  37. 20 Resources for Beginner Designers & Developers | Resources
  38. Tile-able BGs