text over image css - html

Question

text comes over this stack image any idea how to do it
div has a text of 3-4 lines, an image and pagination on left side bottom. something like this.
Image vertical-aligned :middle,
text vertical-aligned:middle,
small pagination text on the left bottom side of this background stack image
.image {
position: relative;
width: 100%; /* for IE 6 */
}
div {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}

Answer 1

Since it looks like what you needed, You may use flex, padding and margin:
div {
background:url(https://i.stack.imgur.com/EinaJ.png) top center;
width:620px;
margin:auto;
padding:40px 40px 30px;
height:790px;
position:relative;
display:flex;
flex-flow:column;
justify-content:center;
}
img, p, nav {
padding:5px;
margin:0;
/* see me */
background:pink
}
img {
margin:auto auto 0;
}
nav {
bottom:30px;
right:45px;
margin:auto 0 0;
border-radius:0 0 0.25em 0.25em ;
/* see me */
background:rgba(0,0,0,0.2);
text-align:center;
word-spacing:0.5em;/* better use margin on links, ... */
}
body {
background:#777;
}
<div>
<img src="http://lorempixel.com/200/150"/>
<p>here is</p>
<p>some line</p>
<p>of</p>
<p>text</p>
<nav>navigation : <a href> link</a> <a href> link</a> <a href> link</a></nav>
</div>
A ressource among others that can be usefull: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

I think you forgot to change color #000 of div. or it may problem of z-index
div {
color:Black;
position: absolute;
top: 200px;
left: 0;
width: 100%;
z-index:222;
}

Answer 3

You should make a container div with 'position: relative;', then include the image inside this div and also include the text with 'position: absolute;';
for example:
#container {
height: 100px;
width: 100px;
position: relative;
}
#container img {
display: block;
width: 100px;
height: 100px;
}
#container span {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
}
and your HTML:
<div id="container">
<img src="" alt="" />
<span>Hello World</span>
</div>