Search code examples
htmlcsssvgbootstrap-4position

SVG Gets Cut Off

Pic of Error Issue

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>
                    <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;
}
Solution

  • 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