Transparent background

  • Author
    Posts
  • #1638198

    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!

    #1638298

    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.

    #1638302

    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.

    #1638321

    johnchasnoff
    Member

    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.

    #1638473

    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.

    #1638474

    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…

    #1638477

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

The topic ‘Transparent background’ is closed to new replies.