Editing the Background Color Opacity

  • Resolved ryount47

    (@ryount47)


    8 years, 10 months ago

    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 8 years, 10 months ago by ryount47.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Grace Faubion

    (@gdfaubion)

    8 years, 10 months ago

    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 8 years, 10 months ago by Grace Faubion.
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    8 years, 10 months ago

    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.

    Thread Starter ryount47

    (@ryount47)

    8 years, 10 months ago

    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.

Tags