Semi Transparent Module Body

[Matthew Lakes]

Hello, 

I have read various discussions about adding a semi-transparent background to the body of a site while allowing the text and other content to still be fully visible, but I can't get it to work on my site. 

I have added opacity css to the .xg_theme #xg_body and it makes the whole page semi transparent 

I added the same code to the .xg_theme .xg_module and it makes the whole module and content within it transparent. 

Please advise on how to create a semi transparent black background for my page that allows the content in the modules to still be fully visible. Similar to this site -  http://themeforest.net/item/clubber-events-music-wordpress-theme/fu... 

Your help would be very appreciated! 

Thanks! 

My site is still under construction - www.midwestmusik.com 

[Atheist Universe]

Try to set this instead:

#xg.xg_widget_main.xg_widget_main_index.xg_widget_main_index_index

[solo]

have you tried #xg_body {

im almost doing that right now.... http://yubasutterconnect.com

[Paul Corona]

I take it you've read through this is detail: http://www.ning.com/help/?p=3477

I've used the basic code from that for a couple of years now on my profile page on our site....I recently migrated to a slight gradient for the body area as things got difficult to read with a complex image in the background at times but you can see what I've done with static background http://www.navydads.com/profile/PaulCorona

for the body code I used:

#xg_body,
.xg_bodybg,
.xg_floating_container {
    background-repeat: repeat-x;
}

and

/*----------------------------------------------------------------------
    Body (#xg_body and descendants)
----------------------------------------------------------------------*/
#xg_body {
    background-position: left bottom;
         background-color:transparent;
}
#xg_body a:hover {
    color: #1A3459;
}
#xg_body h1 {
    background-color:transparent; },
.xg_module_head {
    background-color:#1a3459;
    color:#ffffff; },
.xg_module_body h3 {
    background-color:transparent; },
.xg_module_body caption {
    color: #1a3459;
}
.xg_module_head {
    border-bottom: 2px solid #1a3459;
}
.notitle {
    display:none!important;
}
ul.pagination li.this span {
    border-color: #fff;
    color: #1a3459;
}

[Matthew Lakes]

Hey everyone thanks for your examples - I tried them all - what I ended up doing is using Photo shop to create an image that appears transparent by having the background layer source be the image I use in my website background then add another layer, a black (or any color you want) layer on top set to .3 opacity so that you see the background through it. When you save it as a png and upload it as the image for the main content, setting the modules to transparent - the background has a black shade over the background giving it the semi-transparent look I wanted. Thanks for your help! 

[Paul Corona]

that is exactly the approach I've used recently: