CODEWITHSUNDEEP
phphtmlcssopencartdivision
aiden87
aiden87

Reputation: 969

How to insert image inside div in OpenCart

I've been trying to fit image inside my footer in OpenCart webstore that i've been working on, but i keep bumping into problems.

Wherever i try to fit it, it just doesnt reach it's 100% height and width.

This is the design i'm trying to create.

enter image description here

I'm talking about the gray picture, which includes contact info and payment methods.

This is the last code i have tried. I tried to fit div outside footer but its been a catastrophic result. Also tried to fit it inside row, which was actually the best result, but i just couldnt get height to work at 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%;
}

Thank you very much for your help!

Link to webpage

proprehrana.eu

Upvotes: 1

Views: 1128

Answers (2)

Sofiene Djebali
Sofiene Djebali

Reputation: 4508

  1. Put your image inside the row.
  2. Make your image position absolute.
  3. Make your row position relative.
  4. Finally, place your image with top, left, right and bottom properties.

Upvotes: 0

m4n0
m4n0

Reputation: 32275

There are two errors in your code.

HTML

Move the div inside footer.

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

CSS

Set the width and height for the image in 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;
  }
}

Output:

enter image description here

Upvotes: 2

Related Questions