How to put text over images in HTML. Everytime I enter the below code, the text goes under the image.
<img src="example.jpg">Text</img>
You can create a div with the exact same size as the image.
<div class="imageContainer">Some Text</div>
use the css background-image property to show the image
.imageContainer {
width:200px;
height:200px;
background-image: url(locationoftheimage);
}
more here
note: this slichtly tampers the semantics of your document. If needed use javascript to inject the div in the place of a real image.
You need to use absolutely-positioned CSS over a relatively-positioned img tag. The article Text Blocks Over Image gives a step-by-step example for placing text over an image.
The <img> element is empty — it doesn't have an end tag.
If the image is a background image, use CSS. If it is a content image, then set position: relative on a container, then absolutely position the image and/or text within it.
You can try this...
<div class="image">
<img src="" alt="" />
<h2>Text you want to display over the image</h2>
</div>
CSS
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Using absolute as position is not responsive + mobile friendly. I would suggest using a div with a background-image and then placing text in the div will place text over the image. Depending on your html, you might need to use height with vh value
Related
I want to align images like shown in the Aligned Images link at the bottom of the website. I just mean that I want to place many movies dvd covers on the bottom of the page so it becomes easy to access any movies directly. So if someone hover the movie Blast than it will pop up. Can anyone help me out.
img {
position: absolute;
bottom: 0;
}
And a fiddle: http://jsfiddle.net/dwtp7pje/
Note that if you put the image inside of another div, you need to assign that div a position: relative; for it to work.
Edit: if you're looking to place several images at the bottom, place the images in a div like this:
<div>
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
</div>
with css:
div {
position: absolute;
bottom: 0;
}
img {
max-width: 33%;
}
And the fiddle: http://jsfiddle.net/dwtp7pje/1/
this is in css
.fix{
position:fixed;
bottom:0px;
}
and your html
<img src="yourimagepath" class="fix"/>
absolute: An absolutely positioned based on its nearest relatively positioned parent element.
fixed: Fixed elements are completely independent on the web page. Regardless of any parents, a fixed position element will always be fixed at a point based on the window of browser
Try the following code.
<img src="http://i.imgur.com/KjuqA1l.png" style="position:fixed;bottom:0px;">
Update:
<img src="http://i.imgur.com/KjuqA1l.png" style="position:fixed;bottom:0px;max-width:100%;">
I've seen questions for putting an image in a text area, but I have a slightly different problem: I'd like to layer a textarea on top of an image. I've tried using the z-index style property but the image - which I fadeIn with jquery - always sits on top of the text area.
Here is another way of doing it which may be more versatile.
Create a block level container with two child elements, one for the image and one for the text area:
<div class="textpanel">
<img src="http://placekitten.com/300/300">
<textarea>some text area text...</textarea>
</div>
Apply the following CSS:
.textpanel {
position: relative;
}
.textpanel img {
display: block;
}
.textpanel textarea {
position: absolute;
top: 50px;
left: 50px;
height: 200px;
width: 200px;
background-color: rgba(255,255,255,0.5);
}
Set position: relative on the parent container and then use position: absolute to place the the textarea over the image.
You can use rgba to control the opacity of textarea or you can fade the image using your method of choice.
You can also try styling the border to the textarea as needed.
Demo fiddle: http://jsfiddle.net/audetwebdesign/ygMZ6/
How This Works
Setting position: relative on .textpanel simply sets a reference for any absolutely positioned child elements.
Setting position: absolute on textarea allows for vertical and horizontal positioning.
A new stacking order is created which is why the textarea appears overlying the image, which
is still in the root level stacking order.
In this case, no need to use z-index to alter the stacking order of any elements.
You could always use CSS:
textarea{
background:url('image.png');
}
or
textarea{
background-image:url('image.png');
}
I dont know why you would want to do that but here is my thought on this..
Set the background image of the text area then use simple javascript or jquery to implement background fading..
Here are some examples on background images for text areas..
http://www.angelfire.com/nm/thehtmlsource/jazzup/text/textareabgimage.html
So far I have managed to get the background image to stretch:
XHTML:
<div id="background">
<img src="images/background.jpg" alt="Background" />
</div>
CSS:
#background
{
width: 100%;
height: auto;
position: fixed;
left: 0px;
top: 0px;
}
#background img
{
width: 100%;
height: 100%;
}
This works well, except the image is being displayed from the top when the height of the image exceeds the window height. This means that the top of the image is always displayed but the bottom is cut off. I want to change this so that the image is always displayed from the centre (so that both the top and bottom of the image is cut off and the centre is of the image is displayed).
Here is a good tutorial on creating a perfect full page background image. The same concept can be applied to any ol' div as well.
In general, images that are meant to be background images shouldn't appear in the markup itself. You're mixing presentation with content.
If having the img tag is not an absolute necessity remove it and add the following three lines in your #background class,
background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;
The first line sets your background for the DIV. The second line positions it to centre always. The third line makes sure the background is not repeated which is what I assumed you needed by looking at your HTML structure.
More than happy to suggest further is required.
I have a div tag in which there is an image in left corner and in the middle of the div tag I want to write title of my web application. But I am not able to set text alignment in middle of the div tag. I tried text-align,valign properties with various values but could not set it. Can you please guide me how to to this.
CSS for my div tag is as below
#head
{
background-color: #EEE685;
overflow: auto;
width: 100%;
text-indent:10;
text-align:justify;
}
You have to use text-align: center;, see this fiddle: http://jsfiddle.net/alp82/e3hgu/
Applying CSS text-align:center to a block element centers its contents.
<div>
<img alt="" src="images/accessbg.jpg" align="left"></img>
<h2 align="center">Test</h2>
</div>
The above code will work for you.
How can I make image caption width same as image? Now I have the following code:
<div class="image">
<img src="foo.jpg" alt="" />
<div>This is the caption.</div>
</div>
I've tried a lot of things (floating, absolute positioning etc), but if the caption is long, it always makes the div wide instead of going on many lines. The problem is that I don't know the width of image (or the length of caption). Is the only way to solve this use tables?
So the problem is that you don't know how wide the img will be, and the caption for the img may exceed the width of the img, in which case you want to restrict the width of the caption to the width of the img.
In my case, I applied display:table on the parent element, and applied display:table-caption and caption-side:bottom on the caption element like this:
<div class="image" style="display:table;">
<img src="foo.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>
You can apply display:table; and an arbitrary initial width, eg. width:7px; to the parent block like figure and everything will work as expected!
Here is a live demo:
http://jsfiddle.net/blaker/8snwd/
This solution's limitation is that IE 7 and earlier do not support display:table; and IE 8 requires your doctype to be !DOCTYPE.
Sources:
http://www.lifeathighroad.com/web-development/forcing-to-wraps-to-the-width-of-an-image-using-css-only/
W3Schools (can't post link due to stackoverflow's 2-link limit for people with less than 10 rep)
If the problem is the caption being too long, you can always use
div.image {
width: 200px; /* the width you want */
max-width: 200px; /* same as above */
}
div.image div {
width: 100%;
}
And the caption will stay static. Also, the tag name is img, not image.
Or, if you want to detect your image width, you can use jQuery:
$(document).ready(function() {
var imgWidth = $('.image img').width();
$('.image div').css({width: imgWidth});
});
That way, you're getting the image width, then you set the caption width to it.
The only way to do captioning properly is to enclose the image and caption in a table constructed from span elements with table, table-row and table-cell css attributes.
Any other method (including HTML5 figure tags) either gives width mismatches or causes unwanted line breaks.
If your method must work in a non-css3 browser, then a table is probably the best bet.
You could try to set the image div wrapper display:inline-block
http://jsfiddle.net/steweb/98Xvr/
If the caption is long, the only solution will be to set a fixed width, or set the .image div width by js. I'm trying to think about a pure css solution, but I think it's an hard challenge :)
The key is to treat the image as having a certain width some length. In the example below I checked and my image was 200px wide. And then treat the caption as an inline-block.
HTML:
<div style="width:200px;">
<img src="anImage.png" alt="Image description"/>
<div class="caption">This can be as long as you want.</div>
</div>
CSS:
.caption {
display: inline-block;
}
You can also replace the inline-block with text that is left justified, right, or stretched over the exact image width by replacing above css with one of the following:
.caption {
/* text-align: left; */
/* text-align: right; */
text-align: justify;
}