在h1中的图像上的文字

Question

我正在尝试做的事情，并且在论坛中找不到，如下：

我的wordpress页面顶部有一个图像，然后是页面标题的h1。但是我想把h1放在图像上，在底部并居中，定义另一种字体，大小，透明度，文本行和颜色之间的空格（可能会创建一个h1类？）。

问题是我读过的所有解决方案，在我的wordpress网站中使用div和css自定义，不适合自适应模式。我的意思是，你必须确定一个高度，或者图像将适应高度或文本并且它将被剪切，但在移动模式中，高度总是在变化，它不能很好地工作。实际上，我想在移动设备中使用不同的图像：在桌面设备中，我将使用全景图像，940x470像素，然后在移动窗体中显示另一个图像（我的意思是相同但适应方形），800x800像素。 / p>

这就是我现在所拥有的：

http://sientema-cp31.wordpresstemporal.com/viajar/fez-escapada/

.texto-imagen {
  color: white;
  padding: 20px;
  line-height: 40px
}

.fondo-imagen {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
}

@media ( min-width:768px) {
  .fondo-imagen {
    min-height: 470px;
  }
}

<div class="fondo-imagen" style="background-image:url(https://www.sientemarruecos.viajes/wp-content/uploads/2016/11/Escapada-a-Fez-desde-Tarifa-y-la-Costa-del-Sol-1.jpg)">
  <h1 class="texto-imagen">Escapada a Fez desde Tarifa y la Costa del Sol</h1>
</div>

非常感谢，因为我已经阅读了两周的解决方案，而且我还是迷路了。