How to add an overlapping background colour behind photo in image blocks?

This is an example of what I want to create with the image blocks. An overlapping block of colour behind the photo:

Is there a CSS code I can insert to create this?

Let me know if you need any info. Thanks!

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.

On 10/9/2019 at 5:00 PM, brandon said:

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.

Hi Brandon,

Why gradients? Is that important? I can't see how it affected the outcome...

Hi @etgilbert.

Well, it's been a long time, so I don't recall if I considered or attempted other approaches. But  "how it affected the outcome...", was to create colored boxes behind the images. Perhaps you mean "affected the outcome compared to some other approach" such as using pseudo elements or JavaScript. Or perhaps compared to doing something with absolute positioning and breaking the relationship between the wrapper and the contents (that could work as well). You might even be able to do it with box-shadow or background positioning. There are probably multiple ways to solve this; I suppose the one above is what seemed easiest (or fastest, or most reliable, or most easily modified later) to me at the moment.

@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.

Hello,

This is great! Thank you. Now I have left and right oblique shapes alternately. How can I target one specific background shape and give it a specific color? Best, Pascal

On 2/25/2022 at 9:57 PM, DBLPJ said:

Hello,

This is great! Thank you. Now I have left and right oblique shapes alternately. How can I target one specific background shape and give it a specific color? Best, Pascal

What is your site url? We can check easier