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

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("*wlasIFVr-gD6eBNr9JZmI4IalQqo6ODjge3cY7*TFSEQGYzlXJ0OP*mo3Xco2hLSSSCr7Ti*bJ2TEc*qG/rough_canvasrepeating_background.jpg") 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("*wlasIFVr-gD6eBNr9JZmI4IalQqo6ODjge3cY7*TFSEQGYzlXJ0OP*mo3Xco2hLSSSCr7Ti*bJ2TEc*qG/rough_canvasrepeating_background.jpg") 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:
  • 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.
  • 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.




Tags: background, how to add seamless tile, how to add website background, how to use seamless, ning, pattern, seamless, seamless pattern, seamless texture, seamless tile, More…texture, tile, website background, what are seamless tiles

Views: 1330

Reply to This

Need a Self-hosted Ning alternative?

The SocialEngine Team has created an Import Tool for Ning 2.0 Sites.
Self-hosted & 100% White Label:
SocialEngine PHP is hosted on your own server where you have complete control over your community.

Blog Posts

Replacement Laptop Key Brands

Posted by Replacement Laptop Keys on October 12, 2015 at 5:14am 0 Comments

As you may know, there are a number of brand names or makes for laptop computers. Furthermore, there are several laptop models that pertain to each brand. It is important to keep this in mind if you ever have to seek out a replacement part or…


Gum Disease Treatment

Posted by Discovery Dental WA on October 1, 2015 at 5:43am 0 Comments

Treating gum disease can be accomplished in a number of ways, and whether it'll be an easy or difficult task depends on several things, beginning with one's health. There are a variety of treatments for gum disease depending on its severity, your…


About - Fidelus Technologies LLC

Posted by Fidelus Technologies LLC on September 29, 2015 at 1:31am 0 Comments

About - Fidelus Technologies LLC

We are Fidelus. We make the complex simple. Fidelus Technologies LLC is a leading provider of Cisco Unified…


Three Things You Can Do to Get More Out of Cisco WebEx

Posted by Fidelus Technologies LLC on September 28, 2015 at 5:26am 0 Comments

Summer is almost here. And for today’s corporate workforce that often means more frequent work-from-home days, working vacations and other circumstances that call for a WebEx meeting. With that in mind, we thought it might be a good time to…



© 2015   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips