Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #53824

    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:
    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.


    @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.



    I’m not worried about it looking exactly like the image found here:

    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.


    @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.



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

    Thank you!


    @kyle: Yes, thanks 🙂

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