window with background and strip

[chanisef]

A fixed (non-moving) background window (png image) and a rolling text inside it (normal excavation).

The window shall also have a closing button (png image)

[elysha]

The closing button doesn't have to make a picture.

$('a').click(function(e) {
  e.preventDefault;
  $('.popup').addClass('active');
});
$('.close').click(function() {
  $('.popup').removeClass('active');
});

.popup{
  display: none;
}
.popup.active{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.popup-block{
  position: relative;
  display: block;
  background-image: url("https://i.ibb.co/dDSjZWs/image.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 300px;
  height: 110px;
  padding: 30px 20px 20px;
  border: 1px solid black;
}
.popup-block-text{
  height: 100%;
  overflow-y: auto;
}
.popup-block .close{
  position: absolute;
  display: block;
  padding: 5px 10px;
  top: 0;
  right: 0;
  background: red;
  color: white;
}
.popup-block .close:hover{
  cursor: pointer;
  color: black;
  background: white;
}
.popup-block .close::after{
  content: 'X';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Вызвать popup</a>
<div class="popup">
  <div class="popup-block">
    <div class="popup-block-text">
      Не следует, однако, забывать о том, что курс на социально-ориентированный национальный проект требует определения и уточнения форм воздействия? Соображения высшего порядка, а также дальнейшее развитие различных форм деятельности обеспечивает актуальность существующих финансовых и административных условий! Таким образом, реализация намеченного плана развития в значительной степени обуславливает создание всесторонне сбалансированных нововведений.
  Значимость этих проблем настолько очевидна, что выбранный нами инновационный путь способствует подготовке и реализации существующих финансовых и административных условий? Значимость этих проблем настолько очевидна, что новая модель организационной деятельности напрямую зависит от экономической целесообразности принимаемых решений. Задача организации, в особенности же постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации системы обучения кадров, соответствующей насущным потребностям? С другой стороны постоянное информационно-техническое обеспечение нашей деятельности играет важную роль в формировании новых предложений.

  Задача организации, в особенности же постоянный количественный рост и сфера нашей активности требует от нас анализа модели развития. Задача организации, в особенности же реализация намеченного плана развития напрямую зависит от дальнейших направлений развитая системы массового участия. Дорогие друзья, постоянный количественный рост и сфера нашей активности способствует повышению актуальности новых предложений! Значимость этих проблем настолько очевидна, что повышение уровня гражданского сознания напрямую зависит от существующих финансовых и административных условий.

  Значимость этих проблем настолько очевидна, что постоянное...
&lt;/div&gt;
&lt;span class="close"&gt;&lt;/span&gt;

</div>

</div>