Add a Tiled Background to Ning Networks or Website - Using Seamless Tiles:

This tip is geared more towards newbies, but nice knowledge to gain if you don't know about "tiled" website backgrounds. Did you know you can add a nice polished background to your Ning Network or any website by using what are called "seamless tiles"? Seamless tiles are typically small square images that are created with edges that will match when placed side-by-side and will show no seam. The one seamless tile is used to fill your entire background area. You can find all kinds of free and premium seamless tiles online, and even seamless tile generators. Just Google the words: seamless tiles OR seamless patterns OR seamless texture

The way it works:

When you use a seamless tile image, in order to make it fill the background area, you either "tile" or "repeat" the image. Some platform software like Ning, gives you the ability to upload a seamless tile and click on "tile" to build your background. Or, if this isn't an option for you, using CSS and the background-repeat property: repeat, will do the same thing. I will show you how to do this with CSS, and how to add to a Ning Network using the Design Studio.

Seamless Tile Example:

Here's an example tile, and a screen shot of the tile when "repeated" in both the horizontal width and vertical height of a screen. We call this the x and y axis - - yep, just simple geometry.

Add Seamless Tile Background with CSS (Ning or Other Websites):

• I added the tile above to the Ning Creator site via FireBug. In the screenshot, you will only see the tile under the header, due to the CSS used on Ning Creators. I could have removed the green header, but made the tile stand out more if I leave it.
• See screen shot below.
• 
• Here is the CSS I used, and what you would use if you want to use CSS in the Advanced CSS box (Design Studio/Advanced/ADD CUSTOM CSS)
• Replace my image URL with your seamless tile image URL.

• body {
  background: url("http://storage.ning.com/topology/rest/1.0/file/get/1061660254?profile=original") repeat scroll 0 0 transparent;
  }

• Often when using Ning Themes, we have to use !important to override the theme CSS. Obviously, if you need to use !important, you'll need to add the background with CSS, instead of the Design Studio. Same CSS with !important:

• body {
  background: url("http://storage.ning.com/topology/rest/1.0/file/get/1061660254?profile=original") repeat scroll 0 0 transparent!important;
  }

Add Seamless Tile Background Using Design Studio:

• Access the Design Studio.
• See screen shot below.
• On the Ning platform, we can add backgrounds to several elements via the Design Studio. Anywhere you see the camera icon for upload image, you can tile an image for your background fill. See red arrows below.
• 
• Click on Camera Icon, and upload your image.
• Click on menu dropdown (defaults to no-repeat), and select "Tile".
• Save.

Choosing a seamless tile - and links to elegant tiles:

• If you choose a pattern that is clean and simple, not busy - - you'll be amazed at how polished your background and overall design will become.
• Great site for classic seamless tiles, and where the lovely tile in example above came from: http://tiled-bg.blogspot.com
• Warning: Seriously, be careful when choosing your tile. I would say the majority of online sites that provide seamless tiles are a nightmare. These tiles are busy, dark, and could ruin a website design.
• I love this generator, but it's one of those you really need to go easy breezy on the design. It's an incredibly powerful generator. But less is MUCH better. If you choose and build a simple tile, you're in business.
• http://www.patterncooler.com
• If I ever use patterncoolor, I go with circles, crosses, or just a textured background. Then, I do 2 things: I remove all colors except 1 or 2. And I use the 200% option to make the pattern larger.
• Here's another link to some elegant and minimalistic seamless tiles.
• http://designwoop.com/2012/03/20-free-subtle-textures-for-backgrounds/

Enjoy!

Jen