如何在 OpenCart 中的 div 内插入图片

Question

我一直在尝试将图像放入 OpenCart 网上商店的页脚中，但我一直遇到问题。

无论我在哪里尝试调整它，它都没有达到 100% 的高度和宽度。

这是我正在尝试创建的设计。

我说的是灰色图片，其中包括联系信息和付款方式。

这是我试过的最后一个代码。我试图将 div 放在页脚之外，但这是一个灾难性的结果。还尝试将其放入行内，这实际上是最好的结果，但我无法使高度达到 100%。

`

<div id="bannercek"></div>
<div id="barvanje"></div>
<footer>
  <div class="container">
    <div class="row">
      <?php if ($informations) { ?>
      <div class="col-sm-3">
        <h5><?php echo $text_information; ?></h5>
        <ul class="list-unstyled">
          <?php foreach ($informations as $information) { ?>
          <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
          <?php } ?>
        </ul>
      </div>
      <?php } ?>
      <div class="col-sm-3">
        <h5><?php echo $text_service; ?></h5>
        <ul class="list-unstyled">
          <li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
          <li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
          <li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
        </ul>
      </div>
      <!--<div class="col-sm-6">
        <h5><?php echo $text_extra; ?></h5>
        <ul class="list-unstyled">
          <li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>
          <li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>
          <li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
          <li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>
        </ul>
        </div>
      <!--<div class="col-sm-3">
        <h5><?php echo $text_account; ?></h5>
        <ul class="list-unstyled">
          <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
          <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
          <li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>
          <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
        </ul>
      </div>-->
    </div>
    <hr>
    <p><?php echo $powered; ?></p>
  </div>
</footer>

CSS

#barvanje{
background:#2C3A4E url('../image/footer1.png') center no-repeat;
height:100%;
width:100%;
}

非常感谢您的帮助！

Link到网页

proprehrana.eu

Answer 1

将您的图片放在行内。
使您的图像位置绝对化。
使你的行位置相对。
最后，放置具有顶部、左侧、右侧和底部属性的图像。

Answer 2

您的代码中有两个错误。

HTML

移动页脚内的 div。

<footer>
  <!-- Container, row code -->
  <!-- Code for the two col-sm-3 -->
  <div class="col-sm-6">
    <div id="barvanje"></div>
  </div>
</footer>

CSS

设置px中图像的宽度和高度。

#barvanje {
  background: #2c3a4e url("../image/footer1.png") no-repeat scroll center center;
  height: 328px;
  width: 537px;
  max-width: 100%;
}

@media (min-width: 1200px) {
  #barvanje {
    position: absolute;
  }

  footer {
    height: 400px;
  }
}

输出：

如何在 OpenCart 中的 div 内插入图片

How to insert image inside div in OpenCart

html

css

php

division

opencart