Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

How to add a module background image?

Hi, can anybody share the code for a adding a background image to the modules?As you can see in the pic I attached, I found a code to add an image to the module headers, but now I want the code to add an image to the module's backgrounds.ThanksPS: I am working on making a nice dark black ning layout and if you help me I will share the layout when it's finished.

You need to be a member of Ning Creators Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

  • Jeff, do you want to add a different image to each module background or one image that will cover all the module backgrounds.
  • Hi Jeff, just put your code where it says 'put jpg code here'

    /* Module Body Background (Individual Modules) */
    .xg_module_body{
    background-color: transparent !important;
    background-image:url(put jpg code here);
    background-position:center 0px;
    background-attachment:relative;
    background-repeat:repeat;
    border: none;
    }

    Change if you want it to not repeat to repeat:no-repeat;
    or 'relative' to 'fixed' if you want the pic fixed.

    Hope this helps.

    It doesn't always look good with a pic here though I must add. I always put mine in the border headers and enlarge the boxes.
  • Thank you
  • Hi i need help. can any one teach me how to add a different image in each module?
  • Would you mind sharing the code for module header image? I can't figure it out :(
    • /* Module Head Picture and Border */
      .xg_module_head {
      background-color: transparent !important;
      background-image:url(add your picture here);
      background-position:center 0px;
      background-repeat:no-repeat;
      height:45px;
      border: 6px inset #000000;
      }
      • oh wow thank you so much!!!
      • Ok, it iis a dum question but, If i have a picture in my computer what will be the code for the picture? I need to first upload it to the network?
        • You need to upload the picture to a photo sharing site like Tinypic or photobucket Lasse, or you could put it into a comment box on your page via the 'camera icon' and before you hit to leave the comment take the code that comes up.
          • Thanks very much....Another question...this code here that you gave us...

            .xg_module_head {
            background-color: transparent !important;
            background-image:url(add your picture here);
            background-position:center 0px;
            background-repeat:no-repeat;
            height:45px;
            border: 6px inset #000000;
            }

            Add in my test page the image to the About Box and in the Box where my name is, not in the head of the page where the title is. What is happening?
This reply was deleted.

Search the Creators Network

Latest Activity

Ning via Facebook

Back to School Community Reading http://ow.ly/zbQJh

Back to…

Ning via Facebook

Awesome Questions to Ask New Members of your Online Community http://ow.ly/zbQzA

Ning via Facebook

How to Optimize Your Social Media Strategy to Gain More Followers http://ow.ly/zbQio

Ning via Facebook

Creating a Sense of Belonging in Your Online Community http://ow.ly/zbMfs

Ning via Facebook

Activity Feed 3.0 Updates Has Officially Been Released! Check out the official announcement on…

Ning via Facebook

Designing The Perfect Newcomer To Regular Journey Part 2 http://ow.ly/zbM4Q

Ning via Facebook

Designing The Perfect Newcomer To Regular Journey Part 1 http://ow.ly/zbLXh

Ning via Facebook

Are Comments Bad for Science? http://ow.ly/zbLKV

Are Comments…

Ning via Facebook

The Purpose of Community Platforms http://ow.ly/2KgJJf

The…

Ning via Facebook

Prevent Summer Community Blues http://ow.ly/zbLpp

Ideas to…

Ning via Facebook

Before You Spend $500K On A Community Platform... http://ow.ly/2JQDWi

Ning via Facebook

Power and Influence http://ow.ly/2JsEKn

Power and…

Ning via Facebook

8 Overlooked Elements Every Online Community Should Have http://ow.ly/2IUtId

Ning via Facebook

A Simple Online Community Reputation System http://ow.ly/ycrvl

Ning via Facebook

A Basic Online Community Wireframe http://ow.ly/2I1BxS

A…

Ning via Facebook

Essential Elements Of Community Platforms http://ow.ly/2HuOIy

Ning via Facebook

Moderation Strategy http://ow.ly/2Hidmv

Moderation…

Ning via Facebook

20 Things That Should Be Included In Your Online Community Website http://ow.ly/2Hc6E8

Ning via Facebook

How To Subtly Influence Your Online Community http://ow.ly/2H4zfE

Ning via Facebook

4 Types Of Contributions You Want Your Members To Make Into Your Community…

More…