Как вставить изображение внутри div в OpenCart

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

В коде есть две ошибки.

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

1. Поместите изображение в строке.
2. Сделайте свое положение изображения абсолютным.
3. Сделайте свое положение позиции относительно.
4. Наконец, разместите свое изображение с верхним, левым, правым и нижним свойствами.