Two text blocks over an image - html

Question

I'm trying to put two text blocks over an image, one in the top left and the another in the bottom right. The text in the top left it's ok, but I can't put the text in the bottom right.
Here is the html code:
<section class="feed">
<div class="section">
<img src="">
<p class="text1"><span>Text 1</span></p>
<p class="text2"><span>Text 2</span></p>
</div>
<div class="section">
<img src="">
<p class="text1"><span>Text 3</span></p>
<p class="text2"><span>Text 4</span></p>
</div>
</section>
And now the CSS:
.section {
position: relative;
width: 65%;
margin: 3.375em 0 0 5%;
}
img {
width: 100%;
}
.text1 {
position: absolute;
top: 7.5%;
width: 100%;
}
.text1 span {
color: white;
font: 1.5em Helvetica, Sans-Serif;
font-weight: 300;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 0.625em;
}
.text2 {
/* don't know how to put this one in the bottom right */
}
.text2 span {
color: white;
font: 1em Helvetica, Sans-Serif;
font-weight: 300;
background: rgb(241, 91, 87);
/* fallback color */
background: rgba(241, 91, 87, 0.7);
padding: 0.625em;
}
Thanks.

Answer 1

You could just position it absolute, but starting from the bottom right, in stead of the top left you did with the first text block. Something like this:
.text2 {
position: absolute;
bottom: 0;
right: 0;
}
To see the code in action: http://jsfiddle.net/KzFDx/

Answer 2

here is one ez way to do this.
<div style="background= your image here no repeat, width height.....">
<p style="position, size,.... ></P>
<p style="position, size...."></P>
</div>