Adding a Gradient Background to WordPress

If you want a gradient background on your WordPress site, first of all ignore any theme customization features for the background.  What you will need to do is circumvent those features using CSS.

Create Your Gradient

You’ll need some code that will tell the browser to create the gradient.  Go to Colorzilla.com and create your gradient.  Once you have it looking like you want, copy ALL of the code from the CSS box.

2015-03-06_11-06-46

Access Your Style.CSS File

Log into your WordPress admin dashboard and click on Appearance->Editor.  Your style.css stylesheet should appear.  Check in the right column that the Styles, Stylesheet, style.css is highlighted.

2015-03-06_11-09-44

Scroll to the bottom of this file, hit Return to go to a new line and type body{ 

Now paste the gradient code you copied from ColorZilla.

Hit Return to go to a new line and type }

Your code will look something like this:

body{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

Click on Update File.

Your gradient background should now appear.

Nope, Didn’t Work

The problem most likely lies in your theme.  If you are set on having a gradient background you may need to have someone troubleshoot it.

Please log in to rate this.
0 people found this helpful.


Category: WordPress - General
Tags: , , ,

← Faqs
Diane Ensey
Follow me

Diane Ensey

Programming Diva and CEO at Beyond Paper
For more than 10 years I've been making websites work for clients world-wide using WordPress, Google Maps, forms and custom applications. You can see my work portfolio and case studies at Beyond Paper.
Diane Ensey
Follow me