CODEWITHSUNDEEP
htmlcssimage
Bee Hive
Bee Hive

Reputation: 73

How to make a <div>'s bottom edge below background image

I have a background image, but I need to place a div that its bottom edge should go below the image. What's the easiest way to do this?

Please see the attached image. The white part is the background image and the blue part is my div over the background.

Layout

Upvotes: 1

Views: 569

Answers (2)

I_Can_Help
I_Can_Help

Reputation: 579

You can create a relative positioned wrapper and then set absolute positioning with bottom: -10%; or bottom: -20px; for a div over a div with image:

.image-with-block-wrapper {
  position: relative;
}

.image {
  height: 200px;
  border: 1px solid #111;
  background: url('https://www.gravatar.com/avatar/f42a832da648291bf80206eda08e3332?s=328&d=identicon&r=PG&f=1');
}

.div-over-bg {
  border: 1px solid #111;
  position: absolute;
  height: 50px;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  background: green;
  width: 100px;
  margin: 0 auto;
}
<html>
<head></head>
<body>
<div class='image-with-block-wrapper'>
  <div class='image'></div>
  <div class='div-over-bg'></div>
</div>
</body>
</html>

Edit: In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0; and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.

Upvotes: 2

Nico Shultz
Nico Shultz

Reputation: 1872

So I've created a container with a background image and placed a div inside.

I've given the .block margin: auto; to center it and added position: relative; so I can move it, because it has position: relative; I can add top: 100px; to move it down from the top by 100px

.container {
  background-image: url('https://via.placeholder.com/150');
  width: 100%;
  background-position: cover;
  height: 300px;
  position: relative;
}

.container .block {
  height: 300px;
  background-color: blue;
  width: 500px;
  position: relative;
  margin: auto;
  top: 100px;
}
<div class="container">
  <div class="block">
    
  </div>
</div>

Extra info by @I_Can_Help

In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0; and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.

Upvotes: 0

Related Questions