如何在OpenCart中插入圖像內的div

Question

我一直在嘗試在OpenCart webstore中將圖像放在我的頁腳內，這一直是我一直在努力的工作，但我一直遇到問題。

無論我試圖適應它，它只是沒有達到它的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

你的代碼有兩個錯誤。

HTML

移動內部頁腳股利。

<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. 最後，將您的圖像與頂部，左側，右側和底部屬性。