[Support request] gradient background css

Home Forums Support gradient background css

  • This topic has 7 replies, 3 voices, and was last updated 2 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1377238
    Robin

    Dear GPP

    I have been sifting through the forum posts here but have yet to find one that clearly lays out the css needed to make the background for a full-width page be a specified gradient [linear/to-right/color1/color2/]

    I’ve never tried to figure this out before.

    The closest I think I’ve gotten is thinking that first I need to designate an element ID for the div of a particular block.

    Can you advise? or point me to the forum topic that solves this?

    Thank you.

    . . .

    #1377429
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question so I can see how you are setting things up?

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #1377430
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question so I can see how you are setting things up?

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #1378450
    Robin

    at this point, the only content on the website are image mockups of possible layouts. but there are image gradients in some of the graphics I’m using, and I’d like to be able to reproduce any/all of those gradients as a background for a designated page.

    I don’t know how to put a private link in this thread.

    #1378555
    Leo
    Staff
    Customer Support

    You can edit the original topic and use the private URL field.

    Do you have an example of what you’d like to achieve?

    #1378729
    Robin

    no example to show. I just want to know WHERE to put the css.

    <https://www.w3schools.com/css/css3_gradients.asp&gt;

    I just want to make use of the css ability to create a gradient background. I don’t know where (in which element) to put that css. say I want a particular page to have a gradient background, and that page will have generate blocks on it. where do I put the gradient css?

    #1378770
    Robin

    also, I’m using GenerateBlocks, but when I select use gradient and enter colors, as soon as I click out of the color picker, the colors I entered disappear.

    What am I missing?

    #1378926
    David
    Staff
    Customer Support

    Hi there,

    the CSS required will vary depending upon the layout you’re using.
    For example this will apply to the body:

    body {
        background: rgb(131, 58, 180);
        background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    }

    However you may be using a full width page builder layout and we would need to target the inside-container like so:

    .full-width-content .inside-article {
        background: rgb(131, 58, 180);
        background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    }

    The possibilities are many, hence why a URL to the site you’re working on would help answer the question.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.