Title: adding a gradient as backround
Last modified: August 20, 2016

---

# adding a gradient as backround

 *  [Jojo21](https://wordpress.org/support/users/jojo21/)
 * (@jojo21)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/adding-a-gradient-as-backround/)
 * hi,
    how can I add a 1 pixel wide gradient below the background image instead
   of the background color. On top, in the corners, i want to set a small picture.
   Below this picture there should be a gradient not a monochrome backround. Is 
   there a way to do this?

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/adding-a-gradient-as-backround/#post-3557210)
 * Do not edit the theme itself. First [create a child theme for your changes](http://codex.wordpress.org/Child_Themes).
   Or install a custom CSS plugin.
 *  Thread Starter [Jojo21](https://wordpress.org/support/users/jojo21/)
 * (@jojo21)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/adding-a-gradient-as-backround/#post-3557301)
 * ok, done. Child theme build and activated. And now?
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/adding-a-gradient-as-backround/#post-3557302)
 * Now try using Firefox with the [Firebug add-on](http://getfirebug.com/) to locate
   the CSS you need to over-write in your child theme. Or use whatever developer
   tool is available in your web browser.
 * If you need to change any markup, you’ll need to create a copy of the relevant
   template file in your child theme and make all changes to that file.
 *  Theme Author [nobita](https://wordpress.org/support/users/nobita/)
 * (@nobita)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/adding-a-gradient-as-backround/#post-3557337)
 * Hi Jojo21
 * Thank you for using Raindrops.
 * Raindrops has auto gradient class.
 * Please try below.
 * 1. Create post new
 * 2. Click help tab and click overview
 * 3. You can see current Raindrops gradient class.
 *  This gradient related Theme options ‘Base color for Automatic Color Arrangement’.
   
   base color select ‘red’ then create a red gradient.
 * 4. using example below
    ( please use editor text mode )
 *     ```
       <div class="gradient-3 pad-m corner" style="display:inline-block">
       <img src="http://example.com/img.jpg" alt="example" />
       </div>
       ```
   
 * note:
    class means pad-m padding midium corner round corner
 * style means
    Shrinking Fit for small image
 * **If you need your original style rule.
    
   
    1. Create a custom field name ‘css’
 *     ```
       <div class="my-gradient">
       <img src="http://example.com/img.jpg" alt="example" />
       </div>
       ```
   
 * 2. value set
 *     ```
       .my-gradient{ /*your rules*/ }
       ```
   
 * Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘adding a gradient as backround’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/raindrops/1.700/screenshot.png)
 * raindrops
 * [Support Threads](https://wordpress.org/support/theme/raindrops/)
 * [Active Topics](https://wordpress.org/support/theme/raindrops/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/raindrops/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/raindrops/reviews/)

 * 4 replies
 * 3 participants
 * Last reply from: [nobita](https://wordpress.org/support/users/nobita/)
 * Last activity: [13 years, 2 months ago](https://wordpress.org/support/topic/adding-a-gradient-as-backround/#post-3557337)
 * Status: not resolved