Title: Overlay gradient layer
Last modified: August 31, 2016

---

# Overlay gradient layer

 *  [jbeush](https://wordpress.org/support/users/jbeush/)
 * (@jbeush)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/overlay-gradient-layer/)
 * Hi,
 * i want to overlay my slider with a gradient layer ( e.g. css: background: gradient-
   layer( red, orange ) ), to make fonts more readable. If I use an semi-transparent
   image as a layer, the layer is not supporting full width, and keeps in the container
   with a specific max-width. If I change the max-width of this container, the font-
   sizes and proportions are displaying wrong.
    Is there any solution ( programmatically
   or with gui-editor ) to overlay a gradient layer which covers the full width?
 * Assigning the gradients to the .ms-slider-container class won’t work, because
   the slider background image keeps in foreground ( regardless changing z-index)
 * A different solution is to assign the gradient directly on my slider-image. But
   the image gets cut off at the top. Do anyone know a solution to align the image
   at the bottom?
 * [https://wordpress.org/plugins/master-slider/](https://wordpress.org/plugins/master-slider/)

Viewing 1 replies (of 1 total)

 *  [Averta Support](https://wordpress.org/support/users/averta-support/)
 * (@averta-support)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/overlay-gradient-layer/#post-7172684)
 * Hi,
    Please use these styles:
 *     ```
       .ms-slide-bgcont::before {
           content: "";
           display: block;
           width: 100%;
           height: 100%;
           position: absolute;
           z-index: 1;
           background: linear-gradient(red, yellow);  /*for example*/
       }
       ```
   
 * And if you want use these codes for each slide, you need to set a class for each
   slide and mention slides class name into the code like bellow:
    For example: “
   slide1classname”
 *     ```
       .slide1classname .ms-slide-bgcont::before {
       ...
       }
       ```
   
 * Regards,
    Averta Support

Viewing 1 replies (of 1 total)

The topic ‘Overlay gradient layer’ is closed to new replies.

 * ![](https://ps.w.org/master-slider/assets/icon-256x256.png?rev=1638064)
 * [Master Slider - Responsive Touch Slider](https://wordpress.org/plugins/master-slider/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/master-slider/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/master-slider/)
 * [Active Topics](https://wordpress.org/support/plugin/master-slider/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/master-slider/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/master-slider/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Averta Support](https://wordpress.org/support/users/averta-support/)
 * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/overlay-gradient-layer/#post-7172684)
 * Status: not resolved