Currently, I am in the process of creating a painting website layout for my CS50 homepage. However, there seems to be an issue with the background-color: rgba(0,0,0,0.7); not aligning correctly with the images within the card-group.
<div class="card-group">
<div class="card bg-dark text-white">
<img src="pics/painterpic.jpg" class="card-img-top" alt="Exterior Cover"/>
</div>
<div class="card">
<img src="pics/cover.jpg" class="card-img-top" alt="Interior Cover"/>
</div>
<div class="card-img-overlay">
<h1 class="card-title" id="hero-text">Interior Painting Specialists</h1>
</div>
</div>
CSS:
card-img-overlay { background-color: rgba(0,0,0,0.7) }
card-img-top { width: 100%; height: 100%;}
I have experimented with using <div class="container-fluid> or just container and tried various modifications like:
.card-img-overlay { background-color: rgba(0,0,0,0.7) position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.25rem; border-radius: calc(.25rem - 1px); }
And many other variations while adding width: 100%; height;}
The frustrating part is that the img-overlay extends beyond the div it belongs to, protruding about 3 or 4 inches further out. This has left me scratching my head at why this is happening despite trying different solutions.
If anyone has any insights or suggestions on how to resolve this issue, your input would be greatly appreciated. Thanks!
Here's all the CSS code that I've utilized:
.box300 {
width:100%;
margin:0 auto 0 auto;
padding:5px;
border:1px solid #999;
background:#fff;
}
#hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 56px;
}
#p-1 {
text-align: center;
position: absolute;
top: 62.5%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 18px;
}
.card-img-top {
width: 100%;
height: 100%;
}
.card-img-overlay {
background-color: rgba(0,0,0,0.5);
overflow: hidden;
}