How to position background-image between two texts

Question

I want to position a text and image like this:

This is what I have now

http://jsfiddle.net/vzovk7xd/

<section class="feature">
   <div class="container">
       <article class="feature-item design">
          <h2>Web Design</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum.</p>
           <a href="">READ MORE</a>
       </article>
       <article class="feature-item media">
          <h2>Social Media</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum.</p>
           <a href="">READ MORE</a>
       </article>
       <article class="feature-item apps">
          <h2>Mobile Apps</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum.</p>
           <a href="">READ MORE</a>
       </article>
   </div>
</section> 

CSS

.feature {
margin-top: 100px;
text-align: center;
line-height: 25px;
}
.feature-item {
    width: 33.3%;
    float: left;
}
.design {
    background: url(https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png) no-repeat center center;
}

Answer 1

Don't set background image to your .design div, put another div between the heading and paragraph, give it width and height, and set background image to that div.

<article class="feature-item design">
    <h2>Web Design</h2>
    <div class="image"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus, lacus ac commodo volutpat, felis odio pulvinar enim, non dapibus mauris nulla sed ipsum.</p>
    <a href="">READ MORE</a>
</article>

css

.image { width: 100%; height: 140px; background: url(https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png) no-repeat center center; }

https://jsfiddle.net/vzovk7xd/1/