Transparent background

• 

  frankeapps · Member · Feb 5, 2014 at 1:20 am

  • Copy link
  • Add topic to favorites

  Hi guys,

  I know there are many topic about this, but none of them gave a solution for this problem.

  I want to make the main background, the back of the blog, the main page transparent. Why? Because I run the blog mainly inside an iOS app, and I want to show the app on the back, not the WordPress background, so only the text will show up, nothing on the back.

  I have tried adding this custom CSS but nothing worked so far:

  #body {
  background: transparent;
  background-color: none !important;
  border: none;
  }

  #main-inside {
  background: transparent;
  }

  .site {
  background-color: rgba(255,255,255,0.0);
  }

  Any ideas? I also added a transparent picture to use as the background image, but it still show the white background.

  I have purchased the customization pack, I enable the mobile version and I did check the box to “Include this CSS in the Mobile Theme”.

  Any ideas? That’s the only reason I got upgraded for the paid version and I can’t make it work…

  Cheers!

• 

  theblackwidower · Member · Feb 5, 2014 at 1:33 am

  • Copy link

  I’m not sure if you can do that to begin with. But a good first step would be to alter your body selector so it refers to the body tag, not an identifier called ‘body’. You’ll want to drop the number sign there.

• 

  frankeapps · Member · Feb 5, 2014 at 2:05 am

  • Copy link

  Like this?

  body {
  background-image: none !important;
  background-color: none !important;
  }

  It actually removes the background picture. But it makes the background white, even if I change to this: background-color: transparent.

• 

  johnchasnoff · Member · Feb 5, 2014 at 12:41 pm

  • Copy link

  I did this a while back, and I think this is how:
  #page.hfeed {
  background: transparent;
  }

  I also had to make sure I had no other css instructions to parts of the blog that were masking the transparency, such as changing the header background etc.
  Hope that helps.

• 

  frankeapps · Member · Feb 11, 2014 at 8:54 pm

  • Copy link

  John, sorry but it didn’t work…

  I guess it’s impossible to do this. It’s so simple in regular html, css, etc, but here looks like it’s not possible.

• 

  frankeapps · Member · Feb 11, 2014 at 9:13 pm

  • Copy link

  Good news, but not that good.

  It turn out that there is something on the theme I use (Pink Touch 2) that prevent the background to be transparent.

  I selected the option “Start Fresh: Don’t use the theme’s original CSS.” and bang, the background was transparent!

  The bad news is that the complete theme was disable. I guess I will have to make the complete theme manually…

• 

  thesacredpath · Member · Feb 12, 2014 at 5:10 am

  • Copy link

  @infinityonestudio, Go to Appearance > Background in your dashboard and click the “remove background” button and save and then add the following to your custom CSS.

  body {
  background: none rgba(0, 0, 0, 0) !important;
  }