Support » Themes and Templates » page background transparency

  • Resolved Joe

    (@timelessbeing)


    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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • esmi

    (@esmi)

    Forum Moderator

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

    Joe

    (@timelessbeing)

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

    Nhat

    (@gotonhat)

    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

    esmi

    (@esmi)

    Forum Moderator

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

    Joe

    (@timelessbeing)

    Hi Nhat. That did nothing.

    Nhat

    (@gotonhat)

    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.

    Joe

    (@timelessbeing)

    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

    Joe

    (@timelessbeing)

    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.

    Joe

    (@timelessbeing)

    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.

    Joe

    (@timelessbeing)

    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; }
Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘page background transparency’ is closed to new replies.