@brandon
Oops! I meant why gradient as opposed to a solid HEX color alone. I wasn't clear. I realize the gradient rgba has it completely translucent, so I see now that it's transparent, then solid. This is def cleaner than what I thought in my head.
It's almost always best to provide the URL to the site/page in question along with the view-only password if necessary (for sites in trial mode, etc.). However, in this case you may not even have an example page setup.
Here's an example in Brine which I whipped up.
It uses "card" style image blocks in a single index section/page. Of course, your page ID would be different, and you'd probably want to more specifically target the section. You'll also want to mess with the padding on the text in order to get it where you want.
You could do the same thing with regular 'ol image and text blocks and would probably have a bit more flexibility, but I figured this was good enough to serve as a proof of concept for you so as to answer your question, "yes".
#page-5d9e40adc1c17f087e491930 {
background: ~"linear-gradient(#BBB, #BBB) no-repeat center/1px 100%"; /*https://stackoverflow.com/a/53551089/5338581*/
}
.design-layout-card .intrinsic {
padding-top: 50px;
padding-bottom: 50px;
}
.design-layout-card.image-position-right .intrinsic {
padding-right: 6%;
margin-left: -6%;
background: linear-gradient(90deg, rgba(0,0,0,0) 40%, #FFC0CB 40%);
}
.design-layout-card.image-position-left .intrinsic {
padding-left: 6%;
margin-right: -6%;
background: linear-gradient(270deg, rgba(0,0,0,0) 40%, #FFBB22 40%);
}
.sqs-block-image .design-layout-card .image-card-wrapper {
background-color: transparent;
}
Do let me know how this works for you.
etgilbert got a reaction from brandon in How to add an overlapping background colour behind photo in image blocks?
etgilbert reacted to brandon in How to add an overlapping background colour behind photo in image blocks?
