How to display text over an image css

Question

I am trying to display some text over an image : http://jsfiddle.net/5AUMA/31/

I need to align this text at the bottom part of the image

I tried putting this in css:

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
    vertical-align:bottom;
}

but this doesn't work ...

.............

Secondly I want this to be scalable with the screen width ... if width less than that of a 13" laptop .. remove the image but keep the text

How do i do that

http://jsfiddle.net/x1pmmq6m/ – Kishan Sep 25 '14 at 10:34 — Kishan, Sep 25 '14 at 10:34

score 2 · Accepted Answer · answered Sep 25 '14 at 10:25

Try this:

body{
    color: #202020; /*#3d3636    #fffaf0; #fdfdfd  8c8c8c*/
    font-size:100%;
    font-family: 'Maven Pro', sans-serif;
    line-height:1.4em;
    min-height:100%;
    /*padding-left: 5%;*/
    background-color: #fdfdfd;
}

.head_img{
    margin-top:10%;
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
    position:relative;
}

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
    bottom:5px;
    margin:0;
    padding:0;
}   

@media (max-width: 1366px) {
.head_img img { display:none; }
}

I added position:relative; to the .head_img class and positioned the p element absolutely with a bottom of 5px.

Then added a media query to hide the image once the screen width goes below 1366px. You will have to adjust that breakpoint, but I believe it's a common screen width for 13" laptops.

Updated fiddle: http://jsfiddle.net/5AUMA/33/

Luca · Answer 2 · 2014-09-25T10:34:50.177

http://jsfiddle.net/5AUMA/32/

your markup wasn't correctly set (moved the paragraph in the same div that contains the image)

<body class ="body">
    <div class ="head_img">
          <div style="text-align:center;"><img style="min-width:50%; min-height:60%;"  src = "http://i.imgur.com/H56PB85.jpg"/>

        <p> display this text over the image <br> and at the bottom part of the image</br></p>
              </div>
    </div>
</body>

also look for position:relative on the container div to make things work on all browsers

body{
    color: #202020; /*#3d3636    #fffaf0; #fdfdfd  8c8c8c*/
    font-size:100%;
    font-family: 'Maven Pro', sans-serif;
    line-height:1.4em;
    min-height:100%;
    /*padding-left: 5%;*/
    background-color: #fdfdfd;
}

.head_img{
    margin-top:10%;
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
    position: relative; /* HERE */
}

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
   bottom: 0;
    color: white;
}

Benjamin · Answer 3 · 2014-09-25T10:38:14.323

You need to make couple of changes to your css to make it work as follows.

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
   top: 0;--> Added
   color: white;--> Added
}  

.head_img{
    <--Margin Removed-->
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
}

WORKING FIDDLE

Now to make your image to hide in particular width you can use media queries something like this

@media (max-width: 768px) {
    .head_img img{
        display:none;
    }
}

Darshak Shekhda · Answer 4 · 2014-09-26T06:51:59.663

try this

body {
  color: #202020;
  font-size: 100%;
  font-family: 'Maven Pro', sans-serif;
  line-height: 1.4em;
  min-height: 100%;
  background-color: #fdfdfd;
}
.head_img {
  margin-top: 10%;
  font-size: 1.5em;
  line-height: 1em;
  font-weight: bold;
  font-style: italic;
  color: #000000;
  text-align: center;
  position: relative;
}
.head_img p {
  left: 0;
  width: 100%;
  position: absolute;
  bottom: 5px;
  margin: 0;
  color: #fff;
}

<body class="body">
  <div class="head_img">
    <div style="text-align:center;">
      <img style="min-width:50%; min-height:60%;" src="http://i.imgur.com/H56PB85.jpg" />
    </div>

    <p>display this text over the image
      <br>and at the bottom part of the image</br>
    </p>
  </div>
</body>

score 0 · Answer 5 · answered Sep 25 '14 at 10:32

0

i have added

top: 394px;
color: #fff;

in .head_img p jsfiddle

answered Sep 25 '14 at 10:32

Domain

11,562
3
23
44

if the image gets replaced with one with a different height, the positioning will have to change too. You'd be better off using `bottom: 0` after moving the paragraph in the image container – Luca Sep 25 '14 at 10:34
thanks for the info@Luca but when i added bottom:0; text is moving up. – Domain Sep 25 '14 at 11:14

score 0 · Answer 6 · answered Sep 25 '14 at 10:40

body {
    background-color: #fdfdfd;
    color: #202020;
    font-family: "Maven Pro",sans-serif;
    font-size: 100%;
    line-height: 1.4em;
    min-height: 100%;
}
.innerimg {
    background: url("http://i.imgur.com/H56PB85.jpg") no-repeat scroll center center rgba(0, 0, 0, 0);
    border: 2px solid;
    height: 500px;
    width: 500px;
}
.head_img {
    color: #000000;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    line-height: 1em;
    margin: 0 auto;
    text-align: center;
    width: 500px;
}
.head_img p {
    display: table-cell;
    height: 480px;
    text-align: center;
    vertical-align: bottom;
    width: 500px;
}

<body class ="body">
    <div class ="head_img">
          <div class="innerimg" style="text-align:center;">
               <p> display this text over the image <br> and at the bottom part of the image</br></p>
              
          </div>
      
       
    </div>
</body>

score 0 · Answer 7 · answered Sep 25 '14 at 10:52

add HTML tags

<h2><span>display this text over the image <br> and at the bottom part of the image</span></h2>

CSS

h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}

i have updated the code in this FIDDLe

How to display text over an image css

7 Answers7