Goran: How to make content-area background transparent?

• 

  jonbonhomme · Member · Nov 11, 2014 at 6:49 pm

  • Copy link
  • Add topic to favorites

  I’m using a custom background and would like to make the background in the main content block to be transparent, so that the text appears directly over the custom background. It currently appears as white, and I’ve been searching for hours to try to figure out how to make it transparent. I do have Custom Design active.

  I’m a techie but not so much when it comes to html and CSS. When I inspect the element using browser tools, this appears to be the relevant section:
  <div class=”content-wrapper clear”>

  I plan to educate myself further but would greatly appreciate any help on this. (By the way, the site shown here is just a test; I’m helping my wife build the ‘real’ site, which will look much better. I hope ;)

  The blog I need help with is: (visible only to logged in users)

• 

  jonbonhomme · Member · Nov 14, 2014 at 4:36 pm

  • Copy link

  No responses–I guess I didn’t raise my hand high enough ;)

  I figured it out. The key was the alpha setting. I ended up doing something like this:

  /* Set alpha for entire page */
  div#page { background: rgba(123,123,123,.0);}

  header#masthead { background: rgba(155,123,123,.0)}

  /* Set alpha for content area */
  div#content { background: rgba(255,244,233,.0);}

  /* Set alpha for the page title–below the masthead */
  #content > div.hero.without-featured-image{
  background: rgba(255,244,233,.0);
  }