Php 将图像放入背景图像

我的Wordpress站点中有以下代码

HTML

/img/logo.png“>
/img/logo.png“>

这将在类别名称的位置放置一个图像。（类别名称“更新”=logo.png）

我的问题是，我希望它们的大小是响应的，因为它们将被放置在响应高度div的上方。我的想法是将它们转换为“测试”div的背景图像。我似乎无法重写img标记代码，将它们作为div的背景图像，而不仅仅是将图像本身

编辑例如

<?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
<div style="background-image:url('...');">
...

...

您是否尝试过类似的方法：

<div class="test">
<?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
  <div class="bg-image" style="background-image:url('<?php bloginfo('template_directory'); ?>/img/logo.png');">
<?php } elseif(has_category( 'event' )) { ?>
  <div class="bg-image" style="background-image:url('<?php bloginfo('template_directory'); ?>/img/logo.png');">
<?php } else { ?>
  <div class="bg-image">
<?php } ?>
... Content in div, if necessary ...
</div>
</div>

尝试将您的第一个标记更改为我尝试过的，我当前的尝试是我在编辑下添加的。我想如果我能找到放在（“…”）部分的答案，会有用的。当你尝试这个的时候，你得到了什么？请注意，您必须给出div width和height值（以百分比表示，因为它必须是响应的），否则它将不会显示任何内容，因为它的高度将为0。我添加了一个填充10%来测试，我使用背景色：红色来测试它；它显示了一个红色方块，但没有图像我必须将class=test放在外面，我试着把它放在我认为有语法问题的地方，它是在没有图像的情况下打印到我的站点的文本链接，而不是在没有图像的情况下删除测试分区。没有语法错误。在我的原始代码中，它正确地引用了图像并显示出来，但当我将其作为背景时，它不会显示。请尝试使用我添加到答案中的CSS强制使用CSS。如果可以的话，把它放在你的CSS文件中，并根据你的需要进行调整！我有两个不同的路径目录的形象。它只适用于定义的高度和宽度（使用px或em）是否可以使用%？
<div class="test">
<?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
  <div class="bg-image" style="background-image:url('<?php bloginfo('template_directory'); ?>/img/logo.png');">
<?php } elseif(has_category( 'event' )) { ?>
  <div class="bg-image" style="background-image:url('<?php bloginfo('template_directory'); ?>/img/logo.png');">
<?php } else { ?>
  <div class="bg-image">
<?php } ?>
... Content in div, if necessary ...
</div>
</div>

<?php 
  $testStyle = "";
  if(has_category( 'update' ) || has_category( 'uncategorized' )) {
    $testStyle = "style=\"background-image:url('".get_bloginfo('template_directory')."/img/logo.png')\"";
  } elseif(has_category( 'event' )) {
    $testStyle = "style=\"background-image:url('".get_bloginfo('template_directory')."/img/logo.png')\"";
  }
?>
<div class="test">
  <div class="bg-image" <?php echo $testStyle; ?>></div>
</div>

<style type="text/css">
  .bg-image {
    width:100%;
    min-width:300px;
    height:100px;
    background-size:cover;
  }
</style>