Currently i have a black background to every page of my website. I’m trying to change it to a gradient. I tried putting this into the CSS of theme options:
body .entry-wrap {
background-color: background-image: radial-gradient(circle, #4b4a54, #3b383e, #2a262a, #191718, #000000);
}
But it did not work. There was no change. Did it go wrong somewhere?
Hi @iamwithU,
Thanks for posting in.
It’s not correct, please use this online tool to generate CSS
Just copy the generated styling within your CSS block.
body .entry-wrap {
/*paste it here*/
}
Hope this helps.
Thanks Rad. It worked. But on most pages, there is still the black background. I went to each section, column and element and ensure that the background there was neither transparent or no background. Also the background on the header, footer also remained black. On some elements, like the Accordion & text, the background is also black. Do you know why?
I did as you suggested and pasted the CSS generated:
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,2d2d2d+25,0f0f0f+46,232323+58,1e1e1e+63,383838+76,0f0f0f+95,000000+97,000000+100 /
background: rgb(0,0,0); / Old browsers /
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(45,45,45,1) 25%, rgba(15,15,15,1) 46%, rgba(35,35,35,1) 58%, rgba(30,30,30,1) 63%, rgba(56,56,56,1) 76%, rgba(15,15,15,1) 95%, rgba(0,0,0,1) 97%, rgba(0,0,0,1) 100%); / FF3.6-15 /
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(45,45,45,1) 25%,rgba(15,15,15,1) 46%,rgba(35,35,35,1) 58%,rgba(30,30,30,1) 63%,rgba(56,56,56,1) 76%,rgba(15,15,15,1) 95%,rgba(0,0,0,1) 97%,rgba(0,0,0,1) 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(45,45,45,1) 25%,rgba(15,15,15,1) 46%,rgba(35,35,35,1) 58%,rgba(30,30,30,1) 63%,rgba(56,56,56,1) 76%,rgba(15,15,15,1) 95%,rgba(0,0,0,1) 97%,rgba(0,0,0,1) 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#000000’, endColorstr=’#000000’,GradientType=0 ); / IE6-9 */
For my learning purpose, may I ask: the first line of this CSS code looks rather strange. It starts with:
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-… etc.
That is supposed to be part of the code?
Hi There,
Thanks again for asking!
I can see the gradient BG is coming in most of the pages which have .entry-wrap as the class name to the container.
Some of the page like menu have the class inside the individual post so the gradient BG coming to the content only.
You can use the gradient BG in the body instead of .entry-wrap
regarding your other question, the link is just a reference to the generator. You can ignore it in the CSS.
Thanks
Thanks Basanta, for your prompt reply.
How to “use the gradient BG in the body instead of .entry-wrap”? I’m not a techie, so not sure where to effect the change.
As for your last para, how to ignore the link - from where to where do I delete? This will help me next time to know which part of the CSS is important.
Hi @iamwithU,
I thought your intention was to apply background to content only due to .entry-wrap. If it’s intended to be as a whole, then you can simply remove .entry-wrap.
Example,
body {
/*paste it here*/
}
That’s what @basanta were saying 
If it’s not working, since some stack has predefined background on site wrapper, then you may change it to this as well
body, .site, .x-root {
/*paste it here*/
}
But make sure your element and sub-sections have a transparent background if you wish to see it through.
Thanks!
Thanks Rad! So if i want everything to be changed, I should insert this, right:
"body, .entry-wrap, .site, .x-root { "
Can help me learn something here - what do “site”, “x-root” denote?
Also, some of my footer background appears to be unchanged - is there somewhere I got to check too?
Last, I had asked about:
the first line of this CSS code looks rather strange. It starts with:
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-… etc.
Basanta said I can ignore it. If I want to delete it, which part can be deleted, and which part must retain?
Grateful for your patience.
Hi There,
Yes you have to insert it if you want to change everything.
Those are classes for different layout option.
You can check the footer class why this is happening. Otherwise you can send us the page link so that we can have look.
You can delete this part.
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,2d2d2d+25,0f0f0f+46,232323+58,1e1e1e+63,383838+76,0f0f0f+95,000000+97,000000+100 */
Hope this is clear now.
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Thanks.
Can shed some light how to check the “footer class”? How do I change the background of my footer? It’s still plain black.
Hi @iamwithU,
The CSS should be
.x-colophon {
}
If you want it transparent then
.x-colophon {
background: transparent !important;
}
Or apply your gradient styling.
Thanks!
Thanks Rad. It works.
But now my footers have 2 bands of gradient - 1 band broader, 1 band narrower. Do you know why? Is there a way for the footer to be merged with the rest of the page - so the gradient appears seamlessly across the whole page?
Or there is no choice, but for the main page to be dissociated from the footer?
When I replaced it with “transparent”, some footers remain plain black, some were grey. Any clues why?
Also, the background of my buttons are still plain black. It’s set to transparent, yet the gradient background doesn’t show up. What is overriding and or making the default black?
Hi @iamwithU,
In that case, would you mind providing the site’s URL that has this issue? I checked your account and it seems to be different.
So the issue is some grey and plain black button? And yes, you should use transparent if you intend to see a continues gradient from the body.
Thanks!
Hi Rad, thanks for offer to check.
All my web pages have a footer, except the “Home” page & “What We Do” page. So all the other pages have a footer that has 2 bands of gradient as seen in the screen shots here.
Eg of the url: http://myscarletworm.com/about/
and
http://myscarletworm.com/dine-in/
Hi,
How are you? We meet again 
I’ll tell you why that is happening, that is because you applied the gradient background to everything.
This is the selector you used body, .entry-wrap, .x-colophon, .site, .x-root
That means you applied the gradient background in 1) body, in the 2) entry-wrap, 3) in the footer (x-colophon) two parts of the footer actually top and bottom, 4) in the root div and 5) site div. So that is 5 separate gradient background applied to your page all in all. (this would not be a problem if it is a solid color background, but its not.)
So what you should have done, is make the background of those divs transparent, except the body because that is where you will apply the gradient.
.entry-wrap, .x-colophon, .site, .x-root {
background-color: transparent !important;
}
body {
/*your gradient code here*/
}
Now, you also need to deal with the Sections, ROWs, Columns, Accordions, Search inputs, and other elements that have a background option in it.
Your Accordions has a black background, your Columns too, your Rows has a gray background, your second section has a background image in it, you need to clear all those backgrounds if you want to see the gradient through it. (Im talking about this page, but also applicable to your other pages)
Please review the CSS resources provided by Basanta above, because you might be needing a lot of custom CSS for setting the background of other elements/widget to transparent, and for removing those shadows and borders.
Hope this shed some lights,
Cheers!
Thank you Friech, for your prompt response. And for pointing out my mistake. Good to have you look into my issue!
I have changed my css as you suggest. But I still get 2 bands of gradient on my footers. It could be because I don’t know how to look for the “search inputs” page to change the background. Can tell me how to find that? Appreciate your patience! 
I’ve just downloaded chrome and will start learning soon.
Hi @iamwithU,
As @friech said, because you applied the gradient background to everything. I’m still seeing this
Please change it to this as @friech suggested as well
.entry-wrap, .x-colophon, .site, .x-root {
background-color: transparent !important;
}
body {
background: rgb(0,0,0);
background: -moz-linear-gradient(top,rgba(0,0,0,1) 0%,rgba(45,45,45,1) 25%,rgba(15,15,15,1) 46%,rgba(35,35,35,1) 58%,rgba(30,30,30,1) 63%,rgba(56,56,56,1) 76%,rgba(15,15,15,1) 95%,rgba(0,0,0,1) 97%,rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(top,rgba(0,0,0,1) 0%,rgba(45,45,45,1) 25%,rgba(15,15,15,1) 46%,rgba(35,35,35,1) 58%,rgba(30,30,30,1) 63%,rgba(56,56,56,1) 76%,rgba(15,15,15,1) 95%,rgba(0,0,0,1) 97%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(45,45,45,1) 25%,rgba(15,15,15,1) 46%,rgba(35,35,35,1) 58%,rgba(30,30,30,1) 63%,rgba(56,56,56,1) 76%,rgba(15,15,15,1) 95%,rgba(0,0,0,1) 97%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000',endColorstr='#000000',GradientType=0 );
}
Thanks!
Thanks Rad, for the super prompt reply. I see what you mean! It was my oversight, apologies.
I appreciate your taking the trouble to copy the gradient code, because I realise what can be omitted from the code. Previously, I wasn’t even sure if I had to include the symbols / or *. Now I know!
So grateful for your help. Kudos to you and the team for the hard work in supporting us even through the weekend. 
Have a good Sonday.
You’re most welcome 
Glad we could always help. Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.