CODEWITHSUNDEEP
htmlcssz-indexoverlap
Matt Murphy
Matt Murphy

Reputation: 1619

how to overlay text in a <p> on an image

I have a div with text inside <p> tags, and a PNG image. I want the image to be to the left of the div with the text overlapping. I have tried using the z-index but had little success.

HTML code:

<div class="caption">
    <img src="images/stain.png" id="stain">
    <p>The BA New Media course which I am studying is run by the Institute of Comminications Studies (ICS) at The University of Leeds. The Institute of Communications Studies is an internationally renowned centre for teaching and research in communications, media and culture. Their research is multidisciplinary and has particular strengths in the areas of cultural industries, international communication and political communication. <a href="http://ics.leeds.ac.uk/about/" target="_blank"><strong class="more">Read More...</strong></a>
</div>

CSS code:

.caption {
    width:80%;
    display:block;
    margin:auto;
    margin-top:5%;
    z-index:5;
}

#stain {
    z-index:1;
}

Upvotes: 1

Views: 5985

Answers (1)

violet313
violet313

Reputation: 1932

if i understand your requirements, you could make your image the <div> backgorund image.. in css like this:

.caption {
    background-image: url(images/stain.png);
    background-repeat:no-repeat;
    width:80%;
    display:block;
    margin:auto;
    margin-top:5%;
}

and remove the <img> tag from the <div>

Like the example in my comment.

[edit]
Or if you need more control, use position: relative css etc:


css:

    .caption {
        width:80%;
        display:block;
        margin:auto;
        margin-top:5%;
    }

    img.floaty {
      display:inline;
         float: left;
    }

    .blurb {
       position: relative;
        top:20px;
        left: -50px;
    }


html:

<div class="caption">
    <img class="floaty" src="images/stain.png" id="stain" />
    <p class="blurb">The BA New Media course which I am studying is run by the Institute of Comminications Studies (ICS) at The University of Leeds. The Institute of Communications Studies is an internationally renowned centre for teaching and research in communications, media and culture. Their research is multidisciplinary and has particular strengths in the areas of cultural industries, international communication and political communication. <a href="http://ics.leeds.ac.uk/about/" target="_blank"><strong class="more">Read More...</strong></a></p>
</div>

For example.

Upvotes: 5

Related Questions