This removes the background in the main content area:
.site-main {
background: transparent;
border: 0;
}
To discover what CSS is output by your theme, use a web inspection tool such as Firebug: http://getfirebug.com/ , Chrome Inspect Element: https://developers.google.com/chrome-developer-tools/ or Internet Explorer 9+ F12 Dev. Tools: http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx#csstool
There are others.
When editing CSS, use a Child Theme
http://codex.wordpress.org/Child_Themes
Custom CSS Plugin, or Theme provided custom CSS option.
Edits to parent themes are lost on theme update.
Learn CSS: http://www.w3schools.com/css/
Pioneer’s answer works if you want to remove the background of the main content area entirely, but in fact that area doesn’t need to be completely transparent. It’s quite possible to have a semi-transparent background if desired.
Try replacing the background declaration in your .site-main rule:
.site-main {
background: rgba(241, 236, 227, 0.5);
}
Compatibility note: IE8 and lower do not support alpha values and will produce the solid colour. You would need to use a workaround for those browsers: e.g. using one of Microsoft’s inbuilt CSS filters or setting a semi-transparent 1×1 image as the background instead of the rgba value.
(To avoid having to fiddle around with workarounds or fallbacks, I usually don’t bother with rgba values at all. On this site, the semi-transparent background behind the slider text is created by means of a 1×1 repeating image that is served to all browsers.)
My thanks to you, ‘Pioneer Valley Web Design’ and ‘Cyril Washbrook’.
I’ve been using Firebug since the beginning and incorporated your suggestions into the CSS style sheet. For some reason. the style sheet behaves beautifully when I run the site locally (XAMPP) but when I run it live it doesn’t.
Guess is a hosting issue. Will have to leave it at that unless you guys have other ideas. The best to you in 2014!
If that is true, then you may have the site cached. If so, clear any server cache and also refresh the page after site edits.
This piece of code did it for me:
#main,
.site-main
{
/* Transparency - not for all browsers */
/* ---------------------------------------- */
/* Fallback for web browsers that doesn't support RGBa */
background: #ffffff;
/* RGBa with 0 opacity */
background-color: rgba(255, 255, 255, 0);
/* ---------------------------------------- */
}
Thanks everyone for your help!!!!
