Как определить какой блок используется на сайте Тильда? →
Воспользуйся расширением
Главная страница — Как добавить картинку или видео на фон в попап/popup в Тильде?

Как добавить картинку на фон в попап в Тильде?

Данный код нужно указать в блок (Другое ⟶ T123 ⟶ HTML-код)
<!-- Код добавляет картинку на фон в попап блока -->
<!-- https://roman-kosov.ru/background-popup -->

<style>
    .t-popup_show {
        background: url("https://cdn.dribbble.com/users/3335216/screenshots/7707015/media/696eb21595bcd5f485e2c00aedca6094.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }
</style>

Как работает?

Пример с картинкой
Пример с видео
Tilda Newsletter
Subscribe to our email newsletter for useful tips and valuable resources, sent out every month

А как добавить видео на фон в popup на Tilda Publishing?

Данный код нужно указать в блок (Другое ⟶ T123 ⟶ HTML-код)
Вместо #rec183319471 указывайте id блока, к которому нужно применить видео-фон. Если нужно применить ко всем попапам - удалите #rec183319471 из кода
<div class="popupVideoBackground">
  <video style="object-fit: cover; background-size: cover; width: 100%; height: 100%" preload="auto" playsinline autoplay loop muted>
    <source src="https://cdn.dribbble.com/users/3015218/screenshots/10565900/media/a5555cdc635f36f6c049705b2bc861bc.mp4" type="video/mp4">
  </video>
</div>

<script>
  $(document).ready(function() {
    $(".popupVideoBackground").prependTo("#rec183319471 .t-popup");
  });
</script>

<style>
    #rec183319471 .t-popup {
        height: calc(100% + 5px) !important;
        width: calc(100% + 15px) !important;
        padding: 0 !important;
    }
    
    .popupVideoBackground {
        pointer-events: none;
        position: absolute;
    }
</style>

Примеры сайтов с кодом

Мой код используется на сайтах, сделанных на Тильде: