the easiest way is to go to the fontello page: http://fontello.com/

there you see a lot of icons.
You activate those icons you need ( you can even activate field of icons by press mouse button and pull mouse over an icon field.
on Top give your selection a font-name. and download it.
The resulting zip file you can import at Enfold ( import/export tab)

look to the test-page again:

.intro-tekst { 
box-shadow: inset 0px 0px 111px 3px rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-image: url( ) , url( ),  -webkit-gradient(ellipse farthest-corner at center, #FFFFFF 0%, #FFFFFF 30%, #C4C4C4 100%) !important;
background-image: url( ) , url( ),  radial-gradient(ellipse farthest-corner at center, #FFFFFF 0%, #FFFFFF 30%, #C4C4C4 100%) !important;
background-repeat: no-repeat;
background-position: right bottom, 120px center, center center;
background-size: 120px auto, 200px auto, contain;
}

first url is your edge effect, second is your seal, third is the gradient (if you like)

you can create your own gradient here: http://www.cssportal.com/css-gradient-generator/
for ie and older browsers i would declare a fallback to a simple background-color

Result-page: https://webers-testseite.de/multiple-background-images/
but i go back to my stretched layout again.

• This reply was modified 7 years, 5 months ago by Guenni007.

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.

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

look if this will be the desired aim

i switched temporarly to boxed layout

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;
}

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 7 years, 5 months ago by Guenni007.

by the way i posted a new tut here on board to explain a bit more specific how to … https://kriesi.at/support/topic/some-edited-enfold-alb-elements/

i guess these files are from me – so if you have allready placed some iconboxes (icon-lists) and put in afterwards the substitutes you have to edit them again.
There is new code added. So somehow it has to be added to existing iconboxes and iconlists. Logical right?

I guess i will write a workaround to all my edited files i have made in the last time.

By the way – this is a brainful method but its css magic is wonderfull

please compare : https://webers-testseite.de/elegant/
with: https://kriesi.at/themes/enfold-visual-artist/

these symbols are set on default as placeholders for post formats – is you have a normal entry the pencil is shown – if you have a video etc
but – there are possibilities to style them – but not an easy way:

look demo page of kriesi – there you have pencils etc. sometimes an author is shown or the featured image – depends on which blog style you have choosen: https://kriesi.at/themes/enfold-2017/blog/blog-single-author-small/

it works nice – but it seems to destroy the whole structure of the page where the iframe is inserted !!

do not use the video alb element – Instead use a code element in what ever you like and try my codes above with iframe:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ZN5RDJFwI3I?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

fit the width and heigt option to your desired one

look here: https://webers-testseite.de/embed-youtube/

If you like it with no controls at all:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ZN5RDJFwI3I?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

the right one is without controls but with autoplay option as above :

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ZN5RDJFwI3I?rel=0&controls=0&showinfo=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

by the way – do not wonder about it – the autoplay works in alb editor already :lol:

• This reply was modified 7 years, 5 months ago by Guenni007.

is it a secret youtube video?

i’m Participant as you so – no private-content for me

this looks strange to me: ?feature=oembed&showinfo=0

https://www.youtube-nocookie.com/embed/nNA9ru2Ox5o?rel=0&iframe=true&autoplay=1&showinfo=0

etc pp. ?feature i don’t know

• This reply was modified 7 years, 5 months ago by Guenni007.

can you give us the link to the youtube video you like to embed?