CODEWITHSUNDEEP
htmlcss
Shahnaz Raheem
Shahnaz Raheem

Reputation: 228

Html css div background color not showing when overlapping with an image

I have 2 div 1 have image and i have content with background color white 

<div class="first-box">
<img src="assets/design.png" width="500px">
</div>

<div class="second-box">
    <div class="welcome-text" >
         <div>Create Account</div>
    </div>
</div>

This is css

.first-box{
    height: 30%;
    padding: 0;
    border-radius: 0;
    width: 100%;
}

.second-box{

    margin-top: -10%;
    height: 70%;
    background-color: white;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

As you can see in the second box I use margin-top -10%; so its overlapping with first div but when its overlapping its background color white is not showing. I need to show background color white when its overlapping.

enter image description here

Upvotes: 0

Views: 868

Answers (3)

arslan
arslan

Reputation: 1144

did you try z-index:9 in css which div you want to overlap because in screen only show those elements first which near to screen like from bottom and also use position realtive and top -10px

Upvotes: 0

Dostrelith
Dostrelith

Reputation: 962

You could separate the "Create account" div: HTML

<div class="first-box">
<img src="https://opensource.guide/assets/images/illos/legal.svg" width="500px">
</div>

<div class="second-box">

</div>

    <div class="welcome-text">
         <p>Create Account</p>
    </div>

in CSS, use display: inline-block; to only take the width of the text:

CSS

.first-box{
    height: 30%;
    padding: 0;
    border-radius: 0;
    width: 100%;
    background-color:red;

}

.second-box{
    margin-top: -10%;
    height: 70%;
    background-color: white;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.welcome-text p{
  background-color: white;
  display: inline-block;
  overflow: visible;
}

fiddle: fiddle link

Upvotes: 0

user13046635
user13046635

Reputation:

Add position:relative; to second box.

.second-box{
    position:relative;
    margin-top: -10%;
    height: 70%;
    background-color: white;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

Upvotes: 2

Related Questions