[kyle]

Hello Sakin!

I was wondering if you could help me with this? I’m currently using a gradient image as my page background image with a default background color of red. I’m thinking I can help my page load times by doing away with the graphic and creating a gradient background via CSS? I’ve tried several CSS mods but am having issue where no matter what colors I choose the color codes or names in the ( ) are turned red in CSS, where they would normally be colored dk. blue in the CSS editor and the change does not take place.
Example CSS:
body.custom-background
{
background: #BA3027; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#000000, #BA3027);
background: -o-linear-gradient(#000000, #BA3027);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#BA3027)); /* older webkit syntax */
background: -webkit-linear-gradient(#000000, #BA3027);
}
Thanks for any guidance you can provide.

[Sakin]

@kyle: It cannot be exactly like image but yes we can make it similar. Can you send me your site URL and the image which you can to make it similar to.

[kyle]

@Sakin-

I’m not worried about it looking exactly like the image found here:
http://www.nfmhs-band.com/wp-content/uploads/2015/02/red_gradient.gif

I can just do a simple fade from #000000 to #BA3027 top to bottom in order for it to blend nicely with the Catch Box Red theme.
Honestly,I’d rather the image/background does not repeat like it currently has to in order to fit.

Would be nice to see a gradient option in Customizer for the pro theme. (just my opinion)

Thank you very much for the help.

[Sakin]

@kyle: Remove that background image and background color from your customizer and then add the following css in “Appearance => Theme Options => Custom CSS” box:

body {
	background: #BA3027; /* Show a solid red color for older browsers */
	background: -moz-linear-gradient(#BA3027, #000000);
	background: -o-linear-gradient(#BA3027, #000000);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BA3027), to(#000000)); /* older webkit syntax */
	background: -webkit-linear-gradient(#BA3027, #000000);
}

Yes, but this custom background in customizer is from WordPress core so it’s not good practice to modify core. If the WordPress core adds it then it will be there.

[kyle]

@Sakin

Perfect! Just what I was looking for! Looks like my CSS wasn’t off too bad! I must be learning!

Thank you!

[Sakin]

@kyle: Yes, thanks 🙂

[Author]

Posts