How to position background-image between two texts - html

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>
READ MORE
</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>
READ MORE
</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>
READ MORE
</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>
READ MORE
</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/

Answer 2

add this css:
.design, .media, .apps {
background: url(https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png) no-repeat top center;
background-position:75px 90px;
}
.feature-item p {margin-top:200px}
http://jsfiddle.net/vzovk7xd/6/

Answer 3

Don't put it as background (if you want to do that, you need to set width and height for .design box).. instead, add another div element between h2 and p elmenets:
<h2>Web Design</h2>
<div class="design"><img src="https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png"/></div>
<p>Lorem ipsum dolor sit amet</p>
Working fiddle: http://jsfiddle.net/vzovk7xd/7/

Answer 4

You try to put an inline (in the elments flow order) element with the background style (out of the elements flow)... Better use an inline element to present it like an inline element.
Solution A: (modify CSS, remove background)
.feature-item h2:after {
content: url('https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png');
margin: 24px 0 0 0;
display: inline-block;
}
http://jsfiddle.net/vzovk7xd/9/
Solution B: (modify HTML)
<article class="feature-item design">
<h2>Web Design</h2>
<figure></figure>
figure {
background: url(https://31.media.tumblr.com/avatar_b0a905e3eb32_128.png)
no-repeat center center;
width: 100px;
height: 100px;
}
http://jsfiddle.net/vzovk7xd/3/