Goal: make the “image with text overlay” heading more readable by adding a highlight without affecting other page elements (Parallax 4.0.1 theme).
Initial solution: add CSS to styles.scss targeting the banner heading (selector ending with > h1) to apply a green background (#80b670) and 10px padding. This improves legibility on the existing background image, and the requester planned to deploy it.
Follow-up request: achieve a “text highlight” effect like the provided screenshot, but without the solid green background—ideally configurable via the editor, code acceptable.
Feasibility: the helper clarified that this refined highlight cannot be done with CSS styling alone given the current HTML structure; it would require modifying the HTML (e.g., wrapping parts of the text) rather than only adding styles.
Status: the basic readability fix via CSS is resolved; the advanced highlight effect remains open and would need HTML changes. Images/screenshots are central to understanding the desired visual outcome.
Notes: CSS is the styling code; HTML is the page’s structural markup.
Hi experts,
I would like to add a “highlight” (aka background color) to the text in the “image with text overlay” on our website.
The text is currently hard to read on the background image:
Is there a way to change add a “highlight” feature to this text without affecting the rest of the page?
The theme used is “Parallax 4.0.1”
Thanks a lot for your help.
Julius
Hi @Timertraces
Please add the following code to the end of your styles.scss file:
#banner-1482978157864 > div > div.container.banner__text.text-align--center > div > h1 {
background: #80b670;
padding: 10px;
}
Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!
Hi JHKCreate,
Sorry for the late reply.
You helped me a lot, thank you for that.
Will set it live tomorrow.
Cheers,
Julius
Minus the green background?
yes, just highlighting the text.
Best case, I could add that as a function in the editing/styling menu.
But adding as code is perfect as well.
Thank you!
For this to be done, some code needs to be modified from the structure of the HTML, it won’t be doable by styling code alone unfortunately!
Ok thanks a lot.
