{"id":3477,"date":"2012-04-11T21:54:36","date_gmt":"2012-04-11T21:54:36","guid":{"rendered":"http:\/\/help-o.ning.com\/?p=3477"},"modified":"2019-09-06T06:34:52","modified_gmt":"2019-09-06T06:34:52","slug":"using-images-as-backgrounds-of-pages-and-modules","status":"publish","type":"post","link":"https:\/\/www.ning.com\/help\/using-images-as-backgrounds-of-pages-and-modules\/","title":{"rendered":"Using Images as Backgrounds of Pages and Modules"},"content":{"rendered":"

This screenshot shows uses of CSS in two interesting ways:\u00a0 using CSS, I’ve taken a larger image and used it as the background of the entire page.<\/p>\n

\"Using<\/p>\n

I also used a different image as a module background.<\/p>\n

Using an image as a page background<\/h3>\n

Here is the CSS I used for the background:<\/p>\n

body {\nbackground:url(http:\/\/farm1.static.flickr.com\/81\/263957892_b03344cc29_b.jpg);\nbackground-color: #000;\nbackground-attachment: fixed;\nbackground-position: bottom;\nbackground-repeat: no-repeat;\n}<\/pre>\n
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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
3. Now that we have the image, we can actually replace the CSS background property with your new link at api.ning.com.<\/p>\n
Making everything transparent<\/h3>\n
Here’s the CSS I used to make the rest of my network transparent, except for modules:<\/p>\n
#xg { background:transparent !important; }\n#xg_body { background:transparent !important; }<\/pre>\n
Giving the modules an image background<\/h3>\n
And the CSS I used to give the modules a background:<\/p>\n
.xg_module { background:url(http:\/\/l.yimg.com\/us.yimg.com\/i\/us\/cmty\/thm\/badtz_checker.gif); }\n.xg_module .xg_module_head { background:#000; color:#fff; }\n.xg_module .xg_module_body { background:transparent !important; color:#fff; }<\/pre>\n
Again, you can replace the graphic image with one of your own by uploading it through a blog entry.<\/p>\n","protected":false},"excerpt":{"rendered":"
This screenshot shows uses of CSS in two interesting ways:\u00a0 using CSS, I’ve taken a larger image and used it as the background of the entire page.<\/p>\n
I also used a different image as a module background.
\nUsing an image as a page background
\nHere is the CSS I used for the background:
\nbody {
\nbackground:url(http:\/\/farm1.static.flickr.com\/81\/263957892_b03344cc29_b.jpg);
\nbackground-color: #000;
\nbackground-attachment: fixed;
\nbackground-position: bottom;
\nbackground-repeat: no-repeat;
\n}
\nIn 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.
\nBecause 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.
\n1. 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.
\n2. 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.
\n3. Now that we have the image, we can actually replace …<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[62,69,53],"tags":[90,849,965,89,91,9],"yoast_head":"\nUsing Images as Backgrounds of Pages and Modules | Ning Help Center<\/title>\n<meta name=\"description\" content=\"Using Images as Backgrounds of Pages and Modules | Ning Help Center\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ning.com\/help\/using-images-as-backgrounds-of-pages-and-modules\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Images as Backgrounds of Pages and Modules | Ning Help Center\" \/>\n<meta property=\"og:description\" content=\"Using Images as Backgrounds of Pages and Modules | Ning Help Center\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ning.com\/help\/using-images-as-backgrounds-of-pages-and-modules\/\" \/>\n<meta property=\"og:site_name\" content=\"Ning Help Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Ning\" \/>\n<meta property=\"article:published_time\" content=\"2012-04-11T21:54:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-06T06:34:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ning.com\/help\/wp-content\/uploads\/cssdemo1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@Ning\" \/>\n<meta name=\"twitter:site\" content=\"@Ning\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ning.com\/help\/#website\",\"url\":\"https:\/\/www.ning.com\/help\/\",\"name\":\"Ning Help Center\",\"description\":\"The place to look for help with the details of your Ning Network.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ning.com\/help\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.ning.com\/help\/using-images-as-backgrounds-of-pages-and-modules\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\/help\/wp-content\/uploads\/cssdemo1.png\",\"contentUrl\":\"\/help\/wp-content\/uploads\/cssdemo1.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ning.com\/help\/using-images-as-backgrounds-of-pages-and-modules\/#webpage\",\"url\":\"https:\/\/www.ning.com\/help\/using-images-as-backgrounds-of-pages-and-modules\/\",\"name\":\"Using Images as Backgrounds of Pages and Modules | Ning Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/www.ning.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ning.com\/help\/using-images-as-backgrounds-of-pages-and-modules\/#primaryimage\"},\"datePublished\":\"2012-04-11T21:54:36+00:00\",\"dateModified\":\"2019-09-06T06:34:52+00:00\",\"author\":{\"@id\":\"https:\/\/www.ning.com\/help\/#\/schema\/person\/dec9bc9aa2d82cae488f9a48da93f231\"},\"description\":\"Using Images as Backgrounds of Pages and Modules | Ning Help Center\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ning.com\/help\/using-images-as-backgrounds-of-pages-and-modules\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ning.com\/help\/using-images-as-backgrounds-of-pages-and-modules\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ning.com\/help\/using-images-as-backgrounds-of-pages-and-modules\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.ning.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Images as Backgrounds of Pages and Modules\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ning.com\/help\/#\/schema\/person\/dec9bc9aa2d82cae488f9a48da93f231\",\"name\":\"aaron\",\"url\":\"https:\/\/www.ning.com\/help\/author\/aaron\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/posts\/3477"}],"collection":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/comments?post=3477"}],"version-history":[{"count":8,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/posts\/3477\/revisions"}],"predecessor-version":[{"id":11274,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/posts\/3477\/revisions\/11274"}],"wp:attachment":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/media?parent=3477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/categories?post=3477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/tags?post=3477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}