Add logo to Full Screen Slider

Sorry – now i see that you used the fullscreen slider! why?
Anyway – this is similiar to the other slider – but then the video is cropped on some screen width.

because your png isn’t transparent it does not make sense to have a limit of after pseudo-container:

#top .avia-fullscreen-slider:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 150px;
  left: 50px;
  background-image: url(https://www.thegatheringbarn.co.uk/wp-content/uploads/2017/04/logo2.png);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position: 20px 10px;
}

as menitoned above – use a custom class to better select.

PS: this page is transparent? why don’t you use the logo instead for “branding”

now we had top better find settings for relative dimension for your overlay image. …
and maybe it is better to have that only on bigger screens?

@media only screen and (min-width: 768px) {
  #top .avia-fullwidth-slider::after {
    position: absolute;
    display: block;
    content: "";
    width: 18vw;
    height: 15.3vw;
    max-width: 300px;
    max-height: 255px;
    top: 80px;
    left: 5vw;
    background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
    background-repeat: no-repeat;
    background-size: calc(100% - 40px) calc(100% - 40px);
    background-position:center center;
    background-color: rgba(159, 171, 154, 0.5);
    backdrop-filter: blur(4px);
    border-radius:20px;
    border: 2px solid #9fab9a;
  }
}

and for extra large screens it might be best to have a max-width/-height
always stay the aspect ratio of your inserted image (in your case 1/0.85)

but with absolute dimensions – it will overflow the slider on small screens – thats why i put it inside a media-Query –
if you do like to have that even on small screens – then use relative width / height combinations.

just like on :
https://kriesi.at/support/topic/add-logo-to-full-screen-slider/#post-1480358
f.e.:
(and maybe a small drop-shadow to the png

#top .avia-fullwidth-slider::after {
  position: absolute;
  display: block;
  content: "";
  width: 18vw;
  height: 15.3vw;
  max-width: 411px;
  max-height: 349px;
  min-width: 200px;
  min-height: 170px;
  top: 120px;
  left: 80px;
  background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
  background-repeat: no-repeat;
  background-size: calc(100% - 40px) calc(100% - 40px);
  background-position:center center;
  filter: drop-shadow(1px 1px 2px #666);
}

@media only screen and (max-width: 767px) {
  #top .avia-fullwidth-slider::after {
    top: 2vw;
    left: 2vw;
  }
}

but i see that the slider is not shown on mobile? And we had to place always a fallback image for videos?
dear mods – has this always been the case with Enfold?
It is unfortunate that we do not have the opportunity to decide for ourselves.

i know – see my last comment on that. I do not understand it.

The problem, of course, is that the height of a responsive background will always be smaller on a mobile phone. So unless you want to reduce the size of the logo by the same amount, “nailing” the logo to a specific position will not work. I have already tried to achieve this by using values relative to the screen width.

test this :

#top .html5-video .overlay {
  position: absolute;
  width: 25vw !important;
  height: 21.25vw;
  min-width: 140px;
  min-height: 119px;
  max-width: 411px;
  max-height: 349px;
  padding:15px;
  top: 80px;
  left: 50px;
}
@media only screen and (max-width:767px) {
  #top .html5-video .overlay {
    top: 20px
  }
}