hello, I would like to put the images behind the text, and have them dark and opaque with the text color white on top. can this be done? TIA studio theme
Topic summary
A user wants to reposition images as backgrounds behind text on their Shopify store (Studio theme), with darkened/opaque images and white text overlay.
Solution Provided:
- Add CSS code to
base.css,theme.css,style.css,main.css, orcustom.cssvia Theme Editor - The code sets a background image URL for a specific slide element
- A screenshot demonstrates the visual result
Follow-up Questions:
- How to dynamically link backgrounds to collection items (rather than hardcoding URLs)
- How to change text color to white
The discussion remains open with implementation details pending for the dynamic linking and text styling.
Hi @HCM15 ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
li#Slide-template--16864693059653__collection_list_CJhfYn-1 {
background: url(https://campomadero.com/cdn/shop/files/avinash-kumar-wWyliZfyJ6Y-unsplash.jpg?v=1737843584&width=750) !important;
}
thankyou! how can I link the background to one of the items in each collection? and make the letters white?