Opaque Text Box Behind All Text

[EpicQuest]

Hello!

I'm trying to figure out how to add an opaque box behind all of the text on my site because I have a very detailed image set as my background, and the text is very difficult to read over this background. Are there any scripts I can use that will affect all text boxes to be opaque?

Site URL: https://epicquestperfumes.com/

Password: bcrowfoot

[made4Uo]

Hi @EpicQuest,

You can try adding a text shadow instead. 

1. In your Admin Page > Go to Online store > Themes > Actions > Edit code

2. Under the Asset folder, open the base.css

3. Add the code below at the very bottom of the file

span, h1, h2, h3, h4, p {
text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;;
font-weight: bold;
}

[EpicQuest]

@made4Uo, thank you for the assistance! That definitely helps, but I still think an opaque box would fit better because it would make the text more legible. Is this even an option? I love this text shadow idea, though! 

[made4Uo · Accepted solution]

Hi @EpicQuest,

With the opaque container, you have to target each of the container, and change the background like so.

1. In your Admin Page > Go to Online store > Themes > Actions > Edit code

2. Under the Asset folder, open the base.css

3. Add the code below at the very bottom of the file

.footer-block.grid__item {
background: rgba(0,0,0,0.5);
}

[EpicQuest]

@made4Uo Perfect! This is exactly what I needed! Thank you so much!!!