CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 173

Image is filling full div instead of just filling space below header

I am trying to fill the space below my header in a container with an image. The problem is that the image fills the full container with the image, and not up to the headers position and stopping.

Here is my code:

.container {
  height: 100vh;
}

.showcase {
  background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/innovative_background.jpeg);
  background-position: center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100vh;
  background-size: cover;
}

header {
  background: rgba(255, 255, 255, 0);
  min-height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 20;
  transition: 0.35s all ease;
  border-bottom: solid #cb5057;
}
<div class="container">
  <header>
    <ul>
      <li>link1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Contact Us</li>
    </ul>
  </header>
  <div class="showcase"></div>
</div>

I just want the image fill the remaining div up to the header element. If you got any tips or solutions let me know.

Thanks!

Upvotes: 1

Views: 48

Answers (2)

Johannes
Johannes

Reputation: 67768

Just apply background: #fff (or whatever color you like) to your header, otherwise it's transparent, and since it's fixed, you'll see the .showcase background image below it

.container {
  height: 100vh;
}

.showcase {
  background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(http://placehold.it/500x800/0af);
  background-position: center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100vh;
  background-size: cover;
}

header {
  background: rgba(255, 255, 255, 0);
  min-height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 20;
  transition: 0.35s all ease;
  border-bottom: solid #cb5057;
  background: #fff;
}
<div class="container">
  <header>
    <ul>
      <li>link1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Contact Us</li>
    </ul>
  </header>
  <div class="showcase"></div>
</div>

Upvotes: 0

izulito
izulito

Reputation: 477

Since your header is fixed, the content below needs the padding-top or margin-top with the value the same as your headers height.

Check the following code

.container
{
   height: 100vh;
}

.showcase {
  background: linear-gradient(
      rgba(0, 0, 0, 0.6), 
      rgba(0, 0, 0, 0.6)),
    url(../img/innovative_background.jpeg);
  background-position: center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100vh;
  background-size: cover;
}

header {
  background: rgba(255, 255, 255, 0);
  min-height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 20;
  transition: 0.35s all ease;
  border-bottom: solid #cb5057;
  background: white;
}

.showcase img {
  padding-top: 100px;
  width: 100%;
}
 <div class="container">
            <header>
                <ul>
                    <li>link1</li>
                    <li>Link 2</li>
                    <li>Link 3</li>
                    <li>Contact Us</li>
                </ul>
            </header>
    <div class="showcase">
      <img src="http://www.fillmurray.com/1200/1200" alt="">
    </div>
</div>

Upvotes: 2

Related Questions