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

Kos replied to Suzie Nielsen's discussion Use of Profanity- help! Please
"*lol*  Seriously?  Tell him to go ahead and get a lawyer.   Freedom of speech (I'm sorry) is fine i…"
1 minute ago
FedMedic replied to Suzie Nielsen's discussion Use of Profanity- help! Please
"You're welcome. :)"
10 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion Use of Profanity- help! Please
"Thanks so much... I agree 100%.."
10 hours ago
FedMedic replied to Suzie Nielsen's discussion Use of Profanity- help! Please
"I ask my members to limit their profanity as well. We have one group where they can let it all hang…"
11 hours ago
The Builder :) replied to Gerry Emery's discussion I'd like to see an example or two of the new NIng 3.0 websites
"Hi Gerry Emery. This Ning is  an little example to look Ning 3 potential: Inspirational reflection."
13 hours ago
SAMUEL QUELES replied to Gerry Emery's discussion I'd like to see an example or two of the new NIng 3.0 websites
20 hours ago
SAMUEL QUELES replied to Calico's discussion Como um membro solicita entrar num GRUPO no 3.0 ? in Criadores Brasileiros - Brazilian Creators
"Olá Calico,
O criador do grupo, no momento da criação define se ela será aberta, fechada e pode ain…"
20 hours ago
SAMUEL QUELES replied to Thiago Santos de Moraes's discussion Exemplos de comunidades inspiradoras usando o Ning 3.0 in Criadores Brasileiros - Brazilian Creators
"Olá Calico.
Obrigado pela observação. Eu alterei o layout da página e dei uma enxugada boa. 
Valeu!"
21 hours ago
JFarrow replied to Luke Jones's discussion Change code to a url so you can "install it"
"what if it is already installed?"
yesterday
SweetPotato replied to Luke Jones's discussion Change code to a url so you can "install it"
"I would suggest this company has the wrong guy :-)"
yesterday
Steve Clarke, M, Lajos Lanyi and 1 more joined Ning Creators Network
yesterday
JFarrow replied to Castleforte's discussion Connecting to a Facebook Group
"First you can pull FB Group RSS feeds into pages via RSS modules, but you'll need to get the feed f…"
yesterday
JFarrow replied to Luke Jones's discussion Change code to a url so you can "install it"
"Install what?"
yesterday
Paul Asher replied to Paul Asher's discussion Ning3 Member CSV File
"Done - Thanks :-)"
yesterday
Zachary Moonshine replied to Paul Asher's discussion Ning3 Member CSV File
"sure man "
yesterday
Paul Asher replied to Paul Asher's discussion Ning3 Member CSV File
"Cool Zach. Can I put your site on the N2JR wall of fame?
https://www.jamroom.net/ning-to-jamroom/…"
yesterday
Zachary Moonshine replied to Paul Asher's discussion Ning3 Member CSV File
"I just have to say I love Jamroom it is amazing I have forgotten all about NING in the last few wee…"
yesterday
Fire-Tech replied to Odino's discussion More space between modules
"Hard to say without seeing the site to check the code. If !important isn't working. Try to call it…"
Sunday
Kos replied to Odino's discussion More space between modules
"Did you try to increase the margin size in the code above?  Maybe someone else will chime in here b…"
Sunday
Odino replied to Odino's discussion More space between modules
"OMG I don't know why I wrote this, I'm sorry!!!!
I wanted to write: can I INCREASE the space betwee…"
Sunday
More…