This screenshot shows uses of CSS in two interesting ways: using CSS, I’ve taken a larger image and used it as the background of the entire page.
I also used a different image as a module background.
Using an image as a page background
Here is the CSS I used for the background:
body {
background:url(http://farm1.static.flickr.com/81/263957892_b03344cc29_b.jpg);
background-color: #000;
background-attachment: fixed;
background-position: bottom;
background-repeat: no-repeat;
}
In the case of the demo, I used a photo from the photo service Flickr, but if you want to upload your own photo instead, it’s possible to upload an image directly to your network as well.
Because we’re uploading the graphic in a non-standard way, we’ll be using a work-around: We’ll upload the image from a blog post. Once that image is uploaded, it will always be on the server, even if you delete the blog post.
1. Create a new blog post and use the “upload file” button to upload your graphic file. You can use all the standard graphic image types: JPG, GIF and PNG files all work well.
2. You should see a link to the file inserted into your blog entry that starts with this: http://api.ning.com/files/ Copy that link and delete the blog post.
3. Now that we have the image, we can actually replace the CSS background property with your new link at api.ning.com.
Making everything transparent
Here’s the CSS I used to make the rest of my network transparent, except for modules:
#xg { background:transparent !important; }
#xg_body { background:transparent !important; }
Giving the modules an image background
And the CSS I used to give the modules a background:
.xg_module { background:url(http://l.yimg.com/us.yimg.com/i/us/cmty/thm/badtz_checker.gif); }
.xg_module .xg_module_head { background:#000; color:#fff; }
.xg_module .xg_module_body { background:transparent !important; color:#fff; }
Again, you can replace the graphic image with one of your own by uploading it through a blog entry.