Semi-transparent content background

I wanted to use a background image on my website, but the content background (where the words are) was opaque, so the image did not show through. It took a bit for me to find a work around for this, but it turned out quite simple. This is what I did:

First, add the background image you want. From the dashboard, click on Appearance > Customize. Click on Site Background Image. Select your image.

Then, click on Additional CSS and add this text:

.site-content {
background-color: rgba(255, 255, 255, 0.8);
}

Play with the last value [0.8] until you find the transparency you desire (0.0-1.0). This is actually an opacity value. 1.0 is 100% opaque, 0.8 is 80% opaque, 0.0 is fully transparent. Click Publish to update the changes.

FYI: I use Bento theme. Other themes may work differently. If you have any questions, or know more than me (likely) and have suggestions, please add comments.

 

Leave a Reply