CMS Development

piperb
Member

Overlay Rich Text Module over two different color backgrounds

SOLVE

 

Hi! My company is trying to create the design below, and I am struggling to find a way to overlay a rich text box over two different backgrounds. Any ideas or soltions for this would be greatly appreciated!

Box on Split Background.PNG

1 Accepted solution
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Overlay Rich Text Module over two different color backgrounds

SOLVE

I think you could probably use a css gradient generator to add a gradient as the background color

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#207cca+53,d3d3d3+53 */
background: #207cca; /* Old browsers */
background: -moz-linear-gradient(top,  #207cca 53%, #d3d3d3 53%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #207cca 53%,#d3d3d3 53%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #207cca 53%,#d3d3d3 53%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */

https://www.colorzilla.com/gradient-editor/

 

gradient.png

 


If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

View solution in original post

2 Replies 2
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Overlay Rich Text Module over two different color backgrounds

SOLVE

I think you could probably use a css gradient generator to add a gradient as the background color

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#207cca+53,d3d3d3+53 */
background: #207cca; /* Old browsers */
background: -moz-linear-gradient(top,  #207cca 53%, #d3d3d3 53%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #207cca 53%,#d3d3d3 53%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #207cca 53%,#d3d3d3 53%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */

https://www.colorzilla.com/gradient-editor/

 

gradient.png

 


If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

piperb
Member

Overlay Rich Text Module over two different color backgrounds

SOLVE

Thank you so much! This worked perfectly!