css - 将 CSS 背景图像移动到 HTML 元素

Question

我有一个别人写的模板，他们在CSS中使用了一个图像作为背景图像。

.block-title__inner:after {
    background-image: url('../media/bg/11.jpg');
}

我在 CMS 中使用此模板，需要将其更改为简单的 img 标签，以便我可以更改后端使用的图像。

所以不是 HTML 是

<div class="block-title__inner "></div>

它会变成

<div class="block-title__inner">
    <img src="../media/bg/11.jpg"/>
</div>

我四处搜索，但要么什么都没有，要么我没有使用正确的术语，无论如何我找不到任何关于如何做到这一点的信息，所以任何帮助都会很棒。

Answer 1

由于新发现的信息，此答案已被编辑:

有问题的网站是:headyherps.azurewebsites.net/available/adult/gregory

您不想像您的主题默认那样使用 background-image CSS 属性，而是想在父级中放置一个 img 标签，因为您认为这是管理内容的最佳方式。

所以，您的 HTML 看起来像这样:

<div class="block-title__inner section-bg section-bg_second">
    <img src="../media/bg/11.jpg" alt="" />
    <div class="bg-inner">
        <!--header elements-->
    </div>
</div>

现在，为了使 img 以与 background-position 属性类似的方式运行，我们需要对其应用一些 CSS 属性。

.block-title__inner img{
   position: absolute;
   left: 0px;
   top: 0px;
   width: auto;
   height: auto;
   min-width: 100%;
   min-height: 100%; /* optional fail-safe for images that are too short */
}