CSS - How to get div on top of background image? - html

Question

I have a background image half the page, and I have a div underneath it which I also want to put a quarter of it above the background image. I tried to put padding-top on the profile class but it doesn't work whilst wrapping background-pic and profile in a div.
CSS:
.background-pic{
background-image: url('https://images.pexels.com/photos/825262/pexels-photo-825262.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 60%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(0,0,0,0);
}
.profile{
padding-top: 300px;
}
HTML:
<div class="background-pic">
</div>
<div class="container">
<div class="profile" style="background-color: grey; height : 300px;">
<div class="profile-pic">
</div>
</div>
</div>

Answer 1

You can apply a negative margin-bottom to the first element.
.background-pic {
background-image: url(https://www.placecage.com/600/400);
height: 400px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: -100px;
}
.content {
padding-top: 300px;
background: rgba(10, 150, 10, .4);
}
<div class="background-pic"></div>
<div class="content">Profile content</div>

Answer 2

All you need to do is put a negative margin on the .profile element. I cleaned up your HTML and CSS so you could follow this:
.background-pic{
background-image: url('https://images.pexels.com/photos/825262/pexels-photo-825262.jpeg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 500px;
width: 100%;
}
.profile{
background-color: pink;
height: 500px; /* optional if you put enough content in */
margin: -100px auto 0 auto;
padding: 25px 50px;
width: 600px;
}
<div class="background-pic"></div>
<div class="profile">
Content goes here.
</div>
Demo:
https://codepen.io/staypuftman/pen/QrNZPz

Answer 3

In CSS of the .background-pic add a property position : absolute.
In CSS of the .profile add property position : relative, then change the padding of text inside .profile according to your need.