How to create a box behind text?

I have a block of text on my About Us page that is hard to read against the background. So I want to create a semi-see-through box (black or dark grey) that would go behind the text to make it readable. I tried just adding one to the background image which works, but when you see the site from a mobile device it no longer fits right. So I'm looking for a way to do this with the tools squarespace provides.

Any ideas?

You can use a Markdown Block instead of a Text Block with the following Markdown code:

<div style="background-color:#cccccc; text-align:left; vertical-align: middle; padding:20px 47px;"> Example </div>

Change the cccccc for different background colors in hex.

I can help you with web design if you live in my area. Check a postcode finder, and if you are close enough to me, you are welcome to visit my office. We will fix everything quickly and efficiently at no cost. Our team has wide experience in web design. So maybe we will offer you some helpful hints. There is also a chance to make all changes remotely, please send me a private message.