Because Cascading Style Sheet, or CSS, code includes gradients, you can add CSS-only gradient backgrounds to your websites without any need for sliced images. In Wordpress, you can add CSS gradient backgrounds to your style.css file. You cannot apply the gradient to the body tag as you do for solid backgrounds, but you can use a div 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.
- Skill level:
Other People Are Reading
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.
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 "</div>" directly above "</body>" to close the div.
Load "style.css" in the editor. Add this code to the very bottom of the file:
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 colours 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.
Click the blue "Update File" button to save your "style.css" file. Your gradient background now appears on every page of your Wordpress website.
Tips and warnings
- Set all margins to zero for your "container" div if you see white space around your gradient.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for