Archived topic
gradient background css
7 replies · Started by Robin on July 26, 2020
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.
. . .
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 :)
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 :)
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.
You can edit the original topic and use the private URL field.
Do you have an example of what you'd like to achieve?
no example to show. I just want to know WHERE to put the css.
<https://www.w3schools.com/css/css3_gradients.asp>
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?
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?
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.
