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

Fire-Tech replied to Tyler Durbin's discussion 2.0 Sliders instructions?
"A bunch of us have been using the new one from Jen & TJ. I love it! Here's a discussion about it."
2 hours ago
Kos replied to Karl Harrison's discussion Deleting Data
"Checkout your Terms of Service at the bottom of your site. 

the Network Creator of this Network co…"
5 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"lol damn cellphones lol Scott I think Garfield said it best when he said "get the impact of this co…"
5 hours ago
Scott Bishop replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Sorry bro, no go. Both Chrome & IE. Cleared cache, cookies and browser history. "
15 hours ago
Kos replied to Tyler Durbin's discussion 2.0 Sliders instructions?
"Hey Tyler I used to use a slider designed by SweetPotato.  Maybe checkout his page and go through h…"
19 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Scott, I added a @media query that targets the Galaxy 111. Can you go have another look? :-)"
20 hours ago
Scott Bishop replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Using either Chrome for IE on my GIII your http://beachcatsaustralia.ning.com site doesn't go respo…"
21 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Scott can you explain to me little more on what problems you are having with the Galaxy III, is it…"
21 hours ago
George H. Compton IV replied to Scott Bishop's discussion 301 Redirect from N2 to Offsite
"Hey Scott even better use this, I just wrote it :-) Redirect any individual page from your custom…"
21 hours ago
Scott Bishop replied to Scott Bishop's discussion 301 Redirect from N2 to Offsite
"Even better. Good find. This one works even better, it's instant. I pasted it to the custom code bo…"
yesterday
Scott Bishop replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Just an fyi- I tried Chrome too and then cleared cache and cookies, still didn't work. If you could…"
yesterday
George H. Compton IV replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"WOW Thank you for the compliment and the kind words Garfield :) Hope you have an awesome weekend."
yesterday
George H. Compton IV replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Thank you for the compliment Innocent Hami..  "
yesterday
George H. Compton IV replied to Scott Bishop's discussion 301 Redirect from N2 to Offsite
"301 redirect generator!!Scott this should do the trick for any page you would like to be redirected…"
yesterday
Kos replied to Peter Matthews's discussion Faceted search for Ning 3.0?
"Faceted search, or advanced search as it is commonly called, has been around for a long time and ga…"
yesterday
Garfield Creator replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"This is a real contribution and service to the community. It would be easy to miss and not get the…"
yesterday
Innocent Hami left a comment for George H. Compton IV
""
yesterday
Innocent Hami replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"You are amazing George. I am a student and I am just the beginner of designing. Hope i will learn s…"
yesterday
Scott Bishop replied to Scott Bishop's discussion 301 Redirect from N2 to Offsite
"Strumelia, be careful doing this. I'm not sure if this will pass on SEO for all your pages like a 3…"
yesterday
Kos replied to The Builder :)'s discussion Help! I need to file my ning network 3
"Legal avenues it is.  If they suddenly shut me down, I'll know why."
yesterday
More…