Negative margin for color section #2

make your slider ( i took the full-screen one !)
after the slider take a color-section ( give it the id: over-the-slider )
(here the fullscreen-slider is easier – because i can set the color-section height to 100%) !!
80px is my header height ( if you got a different header height take this value)
do this to quick css:

#over-the-slider {
    position: absolute;
    top: 80px;
    z-index: 5;
    background: transparent;
}

see here : https://webers-testseite.de/daniel01/

Problems : the content of the color-section has to be smaller than the slider-height !
even for small screens – maybe than you can make some media-query rules to fit the content.

What content is over your slider?

• This reply was modified 6 years, 10 months ago by Guenni007.

with headings, text-block or headline Rotator it will work without adopting it to responsive desing too much.
But as you see with masonry etc. which could get very high on small screens this will need adaptations.
The full-width and full-screen sliders are limited in height.

maybe on min-height definition of the color-section it will be good to define the table layout a bit different ( not vertical-align: middle)

#over-the-slider.avia-section.av-minimum-height .container .content {
    display: table-cell;
    vertical-align: top;
    height: 100%;
    float: none !important;
    top: 80px;
}

removed

• This reply was modified 6 years, 10 months ago by Guenni007.

https://webers-testseite.de/daniel01/

look if this will be the desired aim

i switched temporarly to boxed layout

no as you see

click to enlarge:

1) the slider ( i only did show the control elements to make it clear it is a slider full-width) is a normal slider
2) the color-section under it : normal with no miniumum height
3) put in your desired 1/1 container – give to him your class: intro-tekst
3a) background-color of 1/1 container as you like – with inset box-shadow it will work better with #fff
3b) your edge normal on 1/1 container
4) the 1/1 container

declare the margin-top here on 1/1 container not to the color-section via quick css !

thats what i say put the box-shadow to 1/1 container not to the color-section ( so your class intro-tekst) goes to 1/1 not color-section.

background-images can be more than one f.e.

#exampleA {
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
} 

if it is important the first will overlay the second and so on!

so we had to find a different quick css
do not place the background-image in 1/1 container via ALB. only give the background-color : #fff
and your class intro-tekst goes to that 1/1

– i downloaded your seal png and try to implement it – just a moment

please goto my test-page and see the behavior when both urls (images) are in the bottom right corner.
so first url is over the second one !