Overlay gradient layer

  • jbeush

    (@jbeush)


    10 years, 2 months ago

    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://ww.wp.xz.cn/plugins/master-slider/

Viewing 1 replies (of 1 total)
  • Averta Support

    (@averta-support)

    10 years, 2 months ago

    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.