Home>Support>Using the Linear Gradient on background image (under PageBuilder)

Using the Linear Gradient on background image (under PageBuilder)

By zholy9, 9 years ago. Last reply by Andrew Misplon, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi guys …

I would like to know WHAT & WHERE to write in order to get “linear-gradient” to work on my ROW background image?

I’ve tried almost everything under the EDIT ROW > Attributes … but no luck at all.

The only PARTIAL solution was, when I have used linear-gradient under the Visual Editor attributes, but even that worked only for the PAGE, not full width page.

Thank you in advance for any help/advice.

Zdenek

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Zholy9

    Very sorry about the late reply. We work through a prioritized forum queue, and unfortunately it’s taken us some time to get to your thread.

    https://siteorigin.com/about/forum-thread-prioritization/

    Because it’s been a while since you posted this, would you mind letting us know if you still need help? If so, we’ll jump right in.

  2. 9 years, 10 months ago zholy9

    Yes please – I still could not find out, how to do it. If needed, I can give you my access to the site = http://www.come2speak.com (it's in Polish for the moment) … but in few of those pictures you will see, I would like to use the linear gradient.

    Thank a lot. and no problem with late reply.

  3. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure.

    Try this:

    1. Set the row layout to Full Width by editing the row then clicking the Layout tab then Row Layout.
    2. While editing the row click Attributes and enter a Row CSS Class as follows:

    gradient

    3. Using a Custom CSS plugin or child theme style.css file, insert:

    .gradient {
  background-image:
    linear-gradient(
      red, #f06d06
    );
}

    Edit as required.

    Hope that helps get you started.

  4. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Ref: https://css-tricks.com/css3-gradients/

  5. 9 years, 10 months ago zholy9

    I see … Thank you for that. I did know about this solution (to use custom CSS) … but I thought, there MUST be a different way then forcing my self to use custom CSS plugin.
    So far, any changes I needed to do, with CSS was enough to write it under ROW Attributes (CSS style). And using the gradient under Visual Editor worked for me (under attributes, but it didn’t do the full width) … so I thought I’m doing something wrong.

    Thank you very much for your answer.

  6. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad to hear you made progress.

    We’re introducing new features all the time for now though it’ll need to be done like this.

    All the best.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More