Support » Fixing WordPress » Editing the Background Color Opacity

  • Resolved ryount47

    (@ryount47)


    I was just wondering how to change the solid background color (currently black) surrounding the text? I have a killer background image that I would like to show through and so I would like to edit the opacity or do something similar to try and showcase the image, surprised there isn’t already an option to do this as this should be a basic tool… from what I have read I need some CSS which I don’t know the first thing about. Anyways if someone could help that would be great!
    The site I am working on is tractorlaunch.com.

    • This topic was modified 1 year, 7 months ago by  ryount47.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Yes, you would need to edit the css.

    Login into the dashboard and under Appearance select Customize. This will take you to the front of your site with a menu on the left. The last option in that menu is Additional CSS. Select that and it will allow you to add custom CSS. Add the following CSS:

    .site {
        background-color: rgba(26, 26, 26, 0.7);
    }

    You should see an immediate change to the black background. Make sure you save & publish the change(blue button at the top).

    • This reply was modified 1 year, 7 months ago by  Grace Faubion.
    Moderator Steven Stern

    (@sterndata)

    Support Team Volunteer

    Something like this:

    .site {
        background-color: rgba(0,0,0,.4);
    }

    You may want to play around with the color values and opacity percentage.

    To add CSS:

    • If you are using WordPress 4.7 or later, use the “Additional CSS” option in the customizer.
    • If your theme has a custom CSS option, use that to add the CSS shown above.
    • If not, install the plugin Simple Custom CSS.

    Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

    Thanks a ton guys! Both CSS codes were effective! Thanks for such a timely response!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Editing the Background Color Opacity’ is closed to new replies.