Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 20, 2015 at 9:01 pm #53824
    kyle
    Member

    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.

    March 20, 2015 at 11:03 pm #53836
    Sakin
    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 #53874
    kyle
    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.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.

    March 21, 2015 at 3:54 pm #53881
    Sakin
    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 #54203
    kyle
    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
    Sakin
    Keymaster

    @kyle: Yes, thanks 🙂

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Gradient page background instead of solid color’ is closed to new replies.