https://i.sstatic.net/p8f1L.png
The SVG I have positioned is within a container covering the bottom 40% of the page. This setup is intentional as the lower portion of the image is not needed. However, this positioning causes the SVG to be cut off near the text. Despite attempting to use overflow: visible;, the issue persists. Are there any other solutions I should explore? Here's the relevant code snippet:
HTML (Using Bootstrap):
<header class="h-60 w-100 text-white hidden">
<div class="container-fluid h-100 w-100">
<div class="row h-100">
<div class="container d-flex align-items-center justify-content-center w-100 h-100">
<div class="col text-center w-100 heading">
<h1 class="reveal0">Ambrosia<h1>
<h3 class="reveal5">An Open-Source Website Theme</h3>
<br>
<a href="https://jaidevshriram.com" class="btn btn-light reveal15">See My Other Work!</a>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid h-40">
<div class="row h-100">
<div class="container d-flex align-items-center justify-content-center h-100">
<div class="col h-100 w-100 pic1">
</div>
<div class="col">
</div>
</div>
</div>
</div>
CSS:
.hidden {
overflow: hidden;
}
.pic1 {
position: fixed;
background: url("../img/pic1.svg");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
display: block;
margin: auto;
overflow: visible!important;
}