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

Tyler Durbin replied to Bernard Lama's discussion Thank you TJ, Jen and other NCs!
"TJ has saved my butt a few times!  The guy is a master at what he does and his code always works fl…"
14 minutes ago
Rowald replied to Rowald's discussion Site host name, https://network.com, does not match your SSL certificate Subject Name
"Hi Laura, well.. like Amanda said it's expected behavior on their end. Not sure if there is anythin…"
10 hours ago
George H. Compton IV replied to Bernard Lama's discussion Thank you TJ, Jen and other NCs!
""
21 hours ago
Katie McKay replied to Bernard Lama's discussion Thank you TJ, Jen and other NCs!
"Agree!"
22 hours ago
George H. Compton IV replied to soaringeagle's discussion mobile traffic reaches new high and no 3.0 completion date in sight
"Hello seoaringeagle :-)  fullwidth responsive Ning 2.0 network. That's what I'm working on right n…"
yesterday
Kos replied to Heather Ales's discussion How to center group images in Group Hub
"Oh cool.  I had worried a/b how it would appear oh phone when it needs to be responsive (had just p…"
yesterday
Heather Ales replied to Heather Ales's discussion How to center group images in Group Hub
"That worked perfectly! Thank you!!"
yesterday
Kos replied to Heather Ales's discussion How to center group images in Group Hub
"Heather try this (you might need to adjust the 242 up or down) although centering the actual "table…"
yesterday
Jamie Baker replied to Jamie Baker's discussion Ning 3.0 Tips, Tools and more.
"Cheers John, A few members creeping in now."
yesterday
Heather Ales is now a member of Creators Dashboard
yesterday
Heather Ales replied to John Bizley's discussion Page Navigation, Categories & Groups Navigation Tabs Customize
"Thanks John!!"
yesterday
Laura Occhipinti replied to Rowald's discussion Site host name, https://network.com, does not match your SSL certificate Subject Name
"Rowald - Did you end up doing nothing about this or did you make some changes?"
yesterday
John Bizley replied to John Bizley's discussion Page Navigation, Categories & Groups Navigation Tabs Customize
"Hi Heather
 Yes you are correct. The part you are trying to style is this section /**** Sub Nav Cod…"
yesterday
Heather Ales replied to John Bizley's discussion Page Navigation, Categories & Groups Navigation Tabs Customize
"John, 
Would that be the coding to change the tabs on the group hub? Would they be considered "Subn…"
yesterday
Bernard Lama replied to Elson Tan's discussion [3.0 MOD] Quick Login for 3.0!
"Hi Elson, when  I click on Sign Up it is going to http://MYSITE.com/+%20getsignup%20+
Can you help?"
yesterday
True Love Josie replied to True Love Josie's discussion Critique My 3.0 Site
"Thank you! I use www.como.com It took sometime to make the changes to my app because I had it setup…"
yesterday
True Love Josie replied to True Love Josie's discussion Critique My 3.0 Site
"Thanks :)"
yesterday
True Love Josie replied to True Love Josie's discussion Critique My 3.0 Site
"Thank you!"
yesterday
True Love Josie replied to True Love Josie's discussion Critique My 3.0 Site
"Thanks! I'll look into it."
yesterday
Fire-Tech replied to soaringeagle's discussion mobile traffic reaches new high and no 3.0 completion date in sight
"Got it. Thanks my friend ;)"
yesterday
More…