SVG Text not showing

Question

My CSS is meant to show the user's Initials as their profile picture, however, the style used in tandem with the SVG does not show the text. If I separate both instances I see the text.

.card_background_img {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    background-color: #1B2149;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

<div style="width: 100%; height: 150px; background-color: #ffffff; margin: 0 auto; border-radius: 8px; margin-top: 5px; margin-bottom: 13%; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);">
                    <div class="card_background_img"></div>
                    <!--<div-->
                    <!--    style="width: 150px; height: 150px; background-color: #868d9b;background: url('');background-repeat: no-repeat;background-size: cover;background-position: center;border: 5px solid #ffffff;border-radius: 120px;float: left;margin-top: -60px;margin-left: 30px;">-->
                    <!--</div>-->
                    <div style="width: 150px; height: 150px; background-color: #868d9b; background: url('<svg width='150' height='150' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='#868d9b'/><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='#ffffff' font-family='Arial' font-size='60' font-weight='bold'>BIO</text></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center; border: 5px solid #ffffff; border-radius: 120px; float: left; margin-top: -60px; margin-left: 30px;">
</div>
                </div>

Kindly help, because I feel I am missing something on the nose and can't figure out what. Frontend is not my bread and butter so go easy on me. Thanks

Answer 1

You have the svg as a background but you already have a background. I seperated them out and tried the following. It worked for me:

.card_background_img {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    background-color: #1B2149;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

<div style="width: 100%; height: 150px; background-color: #ffffff; margin: 0 auto; border-radius: 8px; margin-top: 5px; margin-bottom: 13%; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);">
        <div class="card_background_img"></div> 
                    <!-- <div style="width: 150px; height: 150px; background-color: #868d9b;background: url('');background-repeat: no-repeat;background-size: cover;background-position: center;border: 5px solid #ffffff;border-radius: 120px;float: left;margin-top: -60px;margin-left: 30px;">
                    </div> -->                    
                    <div style="width: 150px; height: 150px; background-color: #868d9b; background-repeat: no-repeat; background-size: cover; background-position: center; border: 5px solid #ffeeff; border-radius: 120px; float: left; margin-top: -60px; margin-left: 30px;">

                    <svg width='150' height='150' xmlns='http://www.w3.org/2000/svg'>
                        <text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='#ffeeff' font-family='Arial' font-size='60' font-weight='bold'>BIO</text>
                    </svg>
        </div>

    </div>