Question

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

无论我试图适应它，它都不会达到100％的高度和宽度。

这是我试图创作的设计。

我正在谈论灰色图片，其中包括联系信息和付款方式。

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

`

＆＃13;

<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>

＆＃13;

CSS

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

非常感谢你的帮助！

链接到网页

proprehrana.eu

Answer 1

您的代码中有两个错误。

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

<强>输出：

Answer 2

将图像放入行中。
使图像位置绝对。
使您的行位置相对。
最后，使用顶部，左侧，右侧和底部属性放置图像。

如何在OpenCart中的div中插入图像

2 个答案: