How to Make a Gradient Background in WordPress

By Sara Williams

Cascading Style Sheet Web design code includes a gradient option, so you can add CSS-only gradient backgrounds to your WordPress websites without any need for sliced images. In WordPress, you cannot apply the gradient to the body tag as you would for solid backgrounds, but you can use a div container that wraps around the entire website. Many themes built on CSS frameworks already include such a div, though you can add one if your theme does not.

Step 1

Go to the wp-admin directory of your website and log in to the WordPress dashboard. Navigate to Appearance and click the Editor link. Click the link to header.php under the Templates heading to load the HTML file containing your website's body tag.

Step 2

Look for a div with an ID of "container" directly below the body tag in your header.php file. If you do not find one, add one. Here is what it should look like:

Save the file by clicking the blue **Update File** button. If you added a div, load **footer.php** in the editor and add **

directly above ** to close the div.

Step 3

Load style.css in the editor. Add this code to the very bottom of the file:

container {

background-color: #038394; background-image: linear-gradient(top, #038394, #00CCCC); background-image: -webkit-linear-gradient(top, #038394, #00CCCC); background-image: -moz-linear-gradient(top, #038394, #00CCCC); }

The above code sets a fallback for browsers that do not support gradients. Setting "background-image" to "linear-gradient" creates the gradient background. At the least, you need to set a direction for the gradient to start at and then two colors that fade into each other. Add that line of code again two times, adding the Webkit and Mozilla prefixes for Chrome, Safari and Firefox browsers.

Step 4

Click the blue Update File button to save your style.css file. Your gradient background now appears on every page of your WordPress website.

References

Tips

Writer Bio