Need help? Check out our Support site, then


Transparent background

  1. infinityonestudio
    Member

    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!

  2. theblackwidower
    Member

    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.

  3. infinityonestudio
    Member

    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.

  4. 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.

  5. infinityonestudio
    Member

    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.

  6. infinityonestudio
    Member

    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...

  7. @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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic