SVG Gets Cut Off - html

Question

The svg i have position is inside a container that occupies the bottom 40% of the page. This is because the lower half of the image is undesirable. However, as a side effect, the svg gets cut off near the text. I have tried overflow: visible; but hasn't worked. What else can I try? This is the code:
HTML (Bootstrap Used):
<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>
See My Other Work!
</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;
}

Answer 1

you can either use:
background-size: contain
which will make your image smaller, but without cutting it.
Or use:
background-position: top
to let it cut the bottom instead of the top