CODEWITHSUNDEEP
htmlcss
M.G.
M.G.

Reputation: 133

How do I overlap text on an image?

I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.

Think of the stackoverflow site image above (if the text wasn't actually part of the image).

Consider if the orange bars continued till it was over the 'K'

Here is a crude example (# represents the image).

#################
#################
#####
#####   TEXT GOES HERE 
#####

I hope that I was able to adequately explain.

It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).

<td valign="left">
    <div style="float:left;">
        <img src="image.png" />
    </div>
    <div style="float:left;vertical-align:bottom; margin-right:100px">
        <asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
    </div>
</td>

Upvotes: 0

Views: 305

Answers (4)

NGLN
NGLN

Reputation: 43649

When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width. 

span {
    background: white;
    margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>

That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:

div {
    float: left;
}
img {
    vertical-align: bottom;
}
span {
    background: white;
    margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
    <img src="http://lorempixel.com/140/140/city" />
    <span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>

Upvotes: 1

user4284826
user4284826

Reputation:

There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.

More about z-index in here and here.

Upvotes: 0

Sswell410
Sswell410

Reputation: 1

The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Upvotes: 0

MintWelsh
MintWelsh

Reputation: 1259

i'm not 100% on the solution you want, but i imagine it's something like this? http://jsfiddle.net/ujL4pwx9/1/

HTML

<div class="foo">
    <img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
    <p> this is my text and it goes outside of the image when needed </p>
</div>

CSS

div.foo{
    position:relative;
    width: 300px;
}

img{
    width:300px;
}

p{
    position:absolute;
    width:100%;
    right:-50%;
    bottom:0;
    margin:0;
    background:white;
    border:solid 1px black;
}

make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.

is this what you meant?

but personally i'd not use img and instead use a background-image

http://jsfiddle.net/9ka1fq2j/3/

HTML

<div class="foo">
    <p> this is my text and it goes outside of the image when needed </p>
</div>

CSS

div.foo{
    position:relative;
    width: 300px;
    height:300px;
    background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
    background-size:cover;
}

p{
    position:absolute;
    width:100%;
    right:-50%;
    bottom:0;
    margin:0;
    background:white;
    border:solid 1px black;
}

Upvotes: 1

Related Questions