Title: Transparency
Last modified: August 21, 2016

---

# Transparency

 *  Resolved [mrcangrejero](https://wordpress.org/support/users/mrcangrejero/)
 * (@mrcangrejero)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/transparency-4/)
 * A friend’s [website](http://wp-multisites.com/w/mpr/) has a very light background
   image that she would like to be able to see through her post’s content.
 * I have tried tons of CSS suggestions but can’t work a solution for her. Any ideas
   would be appreciated. Thanks!!

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Pioneer Web Design](https://wordpress.org/support/users/swansonphotos/)
 * (@swansonphotos)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/transparency-4/#post-4461953)
 * 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/](http://getfirebug.com/) , Chrome Inspect
   Element: [https://developers.google.com/chrome-developer-tools/](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)](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](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/](http://www.w3schools.com/css/)
 *  [C W (VYSO)](https://wordpress.org/support/users/cyril-washbrook/)
 * (@cyril-washbrook)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/transparency-4/#post-4461957)
 * 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](http://www.vyso.org.au/), the
   semi-transparent background behind the slider text is created by means of a 1
   ×1 repeating image that is served to all browsers.)
 *  Thread Starter [mrcangrejero](https://wordpress.org/support/users/mrcangrejero/)
 * (@mrcangrejero)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/transparency-4/#post-4461985)
 * 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!
 *  [Pioneer Web Design](https://wordpress.org/support/users/swansonphotos/)
 * (@swansonphotos)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/transparency-4/#post-4462049)
 * 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.
 *  Thread Starter [mrcangrejero](https://wordpress.org/support/users/mrcangrejero/)
 * (@mrcangrejero)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/transparency-4/#post-4462069)
 * 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!!!!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Transparency’ is closed to new replies.

## Tags

 * [Transparency](https://wordpress.org/support/topic-tag/transparency/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 3 participants
 * Last reply from: [mrcangrejero](https://wordpress.org/support/users/mrcangrejero/)
 * Last activity: [12 years, 5 months ago](https://wordpress.org/support/topic/transparency-4/#post-4462069)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics