CODEWITHSUNDEEP
htmlcss
James Andrew
James Andrew

Reputation: 207

How do I place an image overlapping two rows in a grid

So I have an image of a panda that is meant to 'hang' on the black line on my web page, but the issue is, it's not lowering over the .top portion of the .background, which it needs to, to overlap over the two parts .top and .bottom in the grid.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #179CA5;
}

.background {
  display: grid;
  height: 100vh;
  width: 100vw;
  grid-template-rows: 3fr 5fr;
  grid-template-areas: "backgroundTop" "backgroundBottom";
}

.background .top {
  grid-area: backgroundTop;
  background-color: #179CA5;
}

.background .top img {
  display: block;
  margin: 10vh auto 0 auto;
  padding-right: 3vw;
  max-height: 13rem;
  max-width: 13rem;
  z-index: 1;
  position: relative;
  border: 3px orange solid;
}

.background .bottom {
  grid-area: backgroundBottom;
  color: white;
  background-color: black;
}
<body>
    <div class="background">
        <div class="top">
            <img src="https://i.imgur.com/ki4auk5.png" alt="Panda">
        </div>
        <div class="bottom">

        </div>
    </div>
</body>

Web page: https://gyazo.com/e3bee60f6a873837c0f3241cd4a8e180

I created a jsfiddle to help, you can see what I mean there.

Upvotes: 1

Views: 818

Answers (2)

MaZoli
MaZoli

Reputation: 1533

The easiest way is to just add a negative bottom margin to the image. Just like that:

.background .top img {
  margin-bottom: -45px;
}

Upvotes: 0

Cuong Vu
Cuong Vu

Reputation: 3723

You can simply use top: 50px in your img block, change 50px to fit your need.

https://jsfiddle.net/7y91mdh4/

Upvotes: 2

Related Questions