CODEWITHSUNDEEP
htmlcss
Adis Azhar
Adis Azhar

Reputation: 1022

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

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>

Upvotes: 0

Views: 2992

Answers (3)

user9687054
user9687054

Reputation:

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.

Upvotes: 0

serraosays
serraosays

Reputation: 7919

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

Upvotes: 0

GuCier
GuCier

Reputation: 7425

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>

Upvotes: 1

Related Questions