如何在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%;
}

非常感谢您的帮助！

链接到网页

proprehrana.eu

Answer 1

代码中有两个错误。

将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;
  }
}

输出：

​

​

Answer 2

1. 把你的图像放进行里。
2. 使您的形象位置绝对。
3. 使您的行位置相对。
4. 最后，使用上、左、右和底部属性放置您的图像。