Row gradient background

Beaver Builder
1

Hello,

How to add gradient background to a row? I have played with adding a css selector to a row but it just did not get picked up. I also found this code in the forum, however it overlays all the content within the row.

Can you please help?

.bg-color {
position: relative;
}

.bg-color:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: ‘’;
z-index: 1;
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#33000000’, endColorstr=’#e6000000’,GradientType=0 );
}

2

Hey Marina,

The code you have above is for a different one. You’ll need to place a class to the row where you want this applied to. On the code below, the class added is gradient-bg. The CSS is…

.gradient-bg .fl-row-content-wrap {
  /* Gradient background code goes here */
}

Next you’ll need is the code for the gradient background. There are lots of CSS gradient generators out there. I’ve used the one from ColorZilla before but they should all be the same. Just play around with it until you get the gradient you want, copy the code they provide, and replace the comment above with it. :slight_smile:

Ben

3

Hi Ben, thanks for a fast response. I forgot to mention that I have an image set as a background. Is there a way to have both image and gradient background? Thank you

4

Hey Marina,

Did you want the gradient to overlay on your image? Not really sure if it’s possible but try the CSS below, add your gradient background as well.

.gradient-bg .fl-row-content-wrap:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    opacity: 0.5;
}

Ben

5

Yes Ben, this is what I want to do - overlay the image with gradient. I did try the code above and it works, however, it overlays all the contents within the row.

6

http://www.repcontrolhero.com

7

Hey Marina,

Play around with the opacity property. 0 is totally transparent and 1 is totally visible. Try 0.5 as a start then go from there.

Ben

8

Ah! I see what you mean now. One moment. :slight_smile:

Ben

9

Add this to your styling. Sorry for missing that one! :slight_smile:

.gradient-bg .fl-row-content {
  position: relative;
  z-index: 1;
}

Ben

10

The gradient disappears after I add the above code. I probably doing something wrong.

11

[Content Hidden]

12

Hey Marina,

You needed to add the 2nd set of CSS on top of the 1st set. I did it and it works fine now. :slight_smile:

Ben

13

Thank you very much Ben. You guys have the best support!

14

No worries! And glad I could help! :slight_smile: Enjoy!

Ben