Putting background color behind my icon with paragraph

I tried researching and tried various techniques and this is as close as I got and I'm trying to mess with the z-index. maybe someone can advice? So I am trying to put my background color layer, behind my fontawesome icon and behind my text as well and position the white background color surrounding the area about half way up the icons back. I will show the html, css below. Thank you so much!! Let me know if I need to specify more. Thanks

<section id="About" class="col-md-12">            
<div class="col-md-12 aboutall">
    <h1>About</h1>
    <hr>
    <div class="col-md-3">
        <div class="bullseye">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-bullseye fa-stack-1x fa-inverse"></i>
            </span>
        </div>
        <div class="front"><span>this is in front</span></div>
            <div class="behind_container">
                <div class="behind">behind</div>        
            </div>
                <div class="TargetMarket">
                    <h3>Target Market</h3>
                    <p>holeHi Golf flagsticks enable you to reach the ideal customer: affluent, educated, with high disposable income. The luxury  market is decidedly difficult to access in a meaningful way&#46;&#46;&#46;yet holeHi Golf has cracked this code with the most  unique ad placement in the world. Each holeHi Golf flagstick receives about 24,000 views per month. Hands&#45;on interaction of players with holeHi Golf custom flagsticks enhances memorability &#45; which, according to a Nielson study, enhances recall by 200%. And because all of our flagsticks conform to USGA and R &amp; A standards, brands can be confident that they are well represented.</p>
                </div>
    </div>
</div>

.bullseye {
position: static;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #8ac53e;
text-align: center;
z-index: 10;
}