Hier ein weiteres Beispiel. https:
//hosting.
zeta-producer.
com/7617711861/index.
html">LINK
Hier habe ich 3 einzelne SVG-Grafiken genutzt.
Diese dann wie oben beschrieben über Ojekt-ID eingefügt.
Somit lassen sich auch größere Grafiken einbinden und anders positionieren. Im Beispiel 60px und in Mobile 40px.
Nutze am besten SVGs ohne Größenangaben, diese werden ja im CSS vergeben.
<
style>
#fancybox-left-ico {
background-image: url(oid:
//image/arrow-leftx);
background-position: 0 0;
}
#fancybox-right-ico {
background-image: url(oid:
//image/arrow-rightx);
background-position: 0 0;
}
#fancybox-left-ico, #fancybox-right-ico {
width: 60px;
height: 60px;
margin-top: -30px;
}
#fancybox-close {
top: 10px;
right: 10px;
width: 60px;
height: 60px;
background: none;
background-image: url(oid:
//image/closexxx);
}
@media (max-width: 780px) {
#fancybox-left-ico, #fancybox-right-ico {
width: 40px;
height: 40px;
margin-top: -20px;
}
#fancybox-close {
top: -20px;
right: -20px;
width: 40px;
height: 40px;
}}
<
/style>
