Tagged: Background color
- This topic has 5 replies, 2 voices, and was last updated 8 years, 2 months ago by
Sakin.
-
AuthorPosts
-
March 20, 2015 at 9:01 pm #53824
kyle
MemberHello 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.March 20, 2015 at 11:03 pm #53836Sakin
Keymaster@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.
March 21, 2015 at 2:25 pm #53874kyle
Member@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.gifI 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.
March 21, 2015 at 3:54 pm #53881Sakin
Keymaster@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.
March 24, 2015 at 5:16 am #54203kyle
Member@Sakin
Perfect! Just what I was looking for! Looks like my CSS wasn’t off too bad! I must be learning!
Thank you!
March 24, 2015 at 10:12 am #54219 -
AuthorPosts
- The topic ‘Gradient page background instead of solid color’ is closed to new replies.