CODEWITHSUNDEEP
htmlcss
swayziak
swayziak

Reputation: 747

Two text blocks over an image

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.

Upvotes: 1

Views: 416

Answers (2)

chien pin wang
chien pin wang

Reputation: 567

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>

Upvotes: 0

Pevara
Pevara

Reputation: 14310

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/

Upvotes: 5

Related Questions