WordPress.org

Forums

[resolved] page background transparency (11 posts)

  1. timelessbeing
    Member
    Posted 1 year ago #

    I'm using the Twenty Eleven theme. I'm wondering if there's a way to add a bit of transparency to the "Page Background Color" so that the site background image shows through a bit? Preferably using some kind of GUI or plugin. Cheers.

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

  3. timelessbeing
    Member
    Posted 1 year ago #

    Thank you. Yes I am using a child. Do you have any advice about the transparency?

  4. Nhat
    Member
    Posted 1 year ago #

    Hi timelessbeing,

    For Twenty Eleven theme, this code should work:

    #page {
    background:rgba(255,255,255,0.5); /* the values are RED GREEN BLUE ALPHA, where alpha is the transparency control, 1 = 100%, 0.5 = 50% */
    }

    You can put that into the bottom of your main theme's CSS or child-theme's CSS; or if you have WordPress's offifical Jetpack plugin installed, go to Appearance --> Edit CSS.

    For RGB color values, you can use sites like colorpicker.com to find their value.

    Hope this helps,
    Nhat

  5. esmi
    Forum Moderator
    Posted 1 year ago #

    @Nhat: will you please stop encouraging people to add or edit their main theme's stylesheet. They need to use ca child theme or a custom CSS plugin.

  6. timelessbeing
    Member
    Posted 1 year ago #

    Hi Nhat. That did nothing.

  7. Nhat
    Member
    Posted 1 year ago #

    Where did you put your code?

    I just tried to reapply that on my testing site again; it works.
    Here's a screenshot of Twenty Eleven without that code: [link]
    Here's Twenty Eleven after applying that code: [link]

    Notice the 50% transparency in the 2nd image.

  8. timelessbeing
    Member
    Posted 1 year ago #

    I installed the "Simple Custom CSS" plugin, and just copy pasted your code right into it.

    Yes I want mine to look just like yours

  9. timelessbeing
    Member
    Posted 1 year ago #

    I tried it again using Jetpack, and this time it worked. It only affects the body of your page though. Now I just need to figure out how to do it for the header.

  10. timelessbeing
    Member
    Posted 1 year ago #

    Header and body backgrounds overlap. That means that even if you set the header bg to fully transparent, the body bg still shows through. I really want my header to have no background.

  11. timelessbeing
    Member
    Posted 1 year ago #

    Aha. I've got it now. Here's my code...

    body #page { background: transparent; }
    
    #primary { background-color: <color+alpha of your choice>; }
    
    #branding { background: transparent; }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.