Text over image is moving with the image, not seperately

Issue

I want the text written on my banner image to come down from the top, but when I do that with margin-top the banner portion from the top is coming down with it and the text is stuck on the top.

Image with problem highlighted

This is my code, help will be appreciated!

.banner-image-main {
  height: 294px;
  width: 100%;
  background-image: url('https://www.quackit.com/html/templates/download/bootstrap/business-1/images/light_bulb.jpg');
  background-size: cover;
}

.banner-text-and-button {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 40px;
}
<div class="navbar-default">
  <div class="navbar-brand" href="#">
    <span class="glyphicon glyphicon-fire pr-2"></span><span>LOGO</span></div>
  <ul>
    <li>Home</li>
    <li>Product</li>
    <li>
      <select>
        <option value="">Services</option>
        <option value="">Engage</option>
        <option value="">Pontificate</option>
        <option value="">Synergize</option>
      </select>
    </li>
    <li>My Account</li>
    <li> <span class="glyphicon glyphicon-shopping-cart pr-2"></span>My Cart</li>
  </ul>
</div>
<div class="banner-image-main">
  <div class="banner-text-and-button">
    <h1><span class="glyphicon glyphicon-equalizer"></span>Dramatically Engage</h1>
    <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
    <a class="btn btn-default" href="#" style="margin-left:12px;">Engage Now</a>
  </div>
</div>

</div>

Solution

That’s because of a strange quirck called margin collapsing. Because I can’t see your complete code, I’m a little hesitant to give you a simple code answer, but adding a padding-top of 1 pixel to .banner-text-and-button already fixes the problem.

I’d suggest reading up on the linked article and decide what’s the best solution for you.

Answered By – Douwe de Haan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published