Put text over the responsive image - css

Question

I have problem, that I don't know how to resolve.
I want to create 3 images(arrows, that I drew before) and put text inside each one, and all this should be responsive...
Here is my code:
HTML:
<div class="arrows">
<div class="arrow1">
<h2></h2>
<p></p>
</div>
<div class="arrow2">
<h2></h2>
<p></p>
</div>
<div class="arrow3">
<h2></h2>
<p></p>
</div>
CSS:
.arrows {
width: 1000px;
margin: 0 auto;
.arrow1 {
background: url("features/arrow-blue.png") top center no-repeat;
min-height: 250px;
}
.arrow2 {
background: url("/features/arrow-orange.png") top center no-repeat;
min-height: 250px;
}
.arrow3 {
background: url("/features/arrow-red.png") top center no-repeat;
min-height: 250px;
}
p {
padding: 0 300px 0 120px;
}
}
For now arrows not responsive at all, they act as cover(background)
I want to do overlay, but instead of color I want to put text.
P.S Bootstrap 2
Thanks!

Answer 1

I had almost exactly the same task to solve for a site I set up just 2 or 3 months ago. (I was actually putting the text inside circles, not arrows, but it's the same principle). If I show you the CSS for it you can adapt it for your arrows.
Basically I used absolute positioning to place the items over each other. The text, of course, has a z-index to overlay it, and a transparent background. Then to get the thing to be responsive, and keep that whatever text size the user might be running with, the media queries have breakpoints in em units, not px ones. The site is http://www.enigmaticweb.com, and it's the two circles containing the logo and the slogan below the logo.
The tricky bit is getting the positions exactly right so the two things stay fluidly on top of each other whatever the screen width; you will have to use trial and error to get the exact positions right. Here's the HTML:
<div id='usrSiteNameDiv'></div>
<p id='gpSiteName'><a href='http://www.enigmaticweb.com'>The Enigmatic Web</a></p>
<div id='usrSiteSloganDiv'></div>
<p id='gpSiteSlogan'>Occasional web development blog articles.....</p>
The circles aren't an image (they are actually made by a div with rounded corners and zero width/height) but that shouldn't affect you, I could have used an image underneath the text just as easily. One problem you might have is a good layout of the text; at one point in this text the browser was wrapping text in a way that made it look unbalanced within the circle, which is why you see the hard space there to force it wrap in a different way.
The CSS (for desktop screen widths) is:
#usrSiteNameDiv {
position : absolute;
border : 4px solid blue;
border-radius: 6.2em;
box-shadow : 5px 0 15px;
height : 12em;
width : 12em;
background : #99ffff;
top : 0;
left : 3em;
z-index : 2;
}
#gpHeader #gpSiteName {
position : absolute;
background : transparent;
font-size : 200%;
width : 5em;
top : 1.2em;
left : 1.5em; /* half the div width cos font in this div is twice the size */
text-align : center;
padding-left: 0.6em;
z-index : 2;
}
#usrSiteSloganDiv {
position : absolute;
bottom : 0;
left : 13.5em;
border : 4px solid #0033cc;
border-radius: 5.17em;
box-shadow : -5px -2px 2px 0px darkblue;
height : 10em;
width : 10em;
background : #99ffff;
}
#gpHeader #gpSiteSlogan {
position : absolute;
bottom : 1.7em;
left : 13.5em;
width : 9em;
background : transparent;
text-align : center;
padding-left: 1em;
font-size : 100%;
}
There wasn't much to do for the responsive part of it, except for mobiles I moved the logo to the left edge, and the slogan is taken out of the circle and just displayed in a line under the logo:
#media all and (max-width: 27em)
{
#usrSiteNameDiv,
#gpHeader #gpSiteName {
left : 0;
}
#usrSiteSloganDiv {
display : none;
}
#gpHeader #gpSiteSlogan {
bottom : 0;
left : 0;
width : 90%;
}
but since we are dealing with text, using em units for the breakpoints ensures it behaves correctly whatever text size the user is using in their browser.
I think that's everything. I hope this will give you enough info to do your design.