Get text to appear over image

Question

I want my text to appear over an image, at the bottom of the image. I can get it to work but when I scale the page, the text moves out of the div (below the image). I want it to stay in the same place when i scale the page.

HTML

<div class="header">
  <img src="images/ct.jpg" class="info-image">
  <p class="HeaderText">Canterbury Tales<p>
</div>

CSS

.info-image {
width:100%;
position:relative;
}

.HeaderText {
position:absolute;
left:35px;
bottom: 10px;
font-size: 3em;
}

website: explorecanterbury.co.uk

the div can be found by clicking on canterbury tales building

Your main issue is that the `.HeaderText` is absolute relative to `.header` and not `.info-image`. all you have to do is give `position:relative;` to `.header`, and `position:absolute;` to `.info-image` & `.HeaderText` — dcohenb, Mar 17 '16 at 12:57

Praveen Kumar Purushothaman · Accepted Answer · 2016-03-17T12:55:29.517

0

You have a few problems:

You need to close <p> with </p>.
Use position: relative on the .header.

Like this?

.header {
  position: relative;
  width: 500px;
}
.info-image {
  max-width: 100%;
  position: relative;
  display: block;
}
.HeaderText {
  position: absolute;
  top: 50%;
  text-align: center;
  left: 0;
  right: 0;
  transform: translate(0, -50%);
  font-size: 3em;
  margin: 0;
  padding: 0;
}

<div class="header">
  <img src="//placehold.it/500" class="info-image">
  <p class="HeaderText">Canterbury Tales</p>
</div>

Preview

edited Mar 17 '16 at 12:55

answered Mar 17 '16 at 12:50

Praveen Kumar Purushothaman

160,666
24
190
242

This does kind of work, but the image isn't responsive anymore – user2953989 Mar 17 '16 at 13:28
@user3005003 Lemme check your main page. Where in the URL? – Praveen Kumar Purushothaman Mar 17 '16 at 13:29
explorecanterbury.co.uk – user2953989 Mar 17 '16 at 13:31
@user3005003 Where there? – Praveen Kumar Purushothaman Mar 17 '16 at 13:31
you have to click on the building 'canterbury tale' its in the middle of the map – user2953989 Mar 17 '16 at 13:34
@user3005003 Checked it. Looks good for me. In three resolutions, including in my mobile. – Praveen Kumar Purushothaman Mar 17 '16 at 13:36
@user3005003 So it is fixed. Working fine. Right? – Praveen Kumar Purushothaman Mar 17 '16 at 13:38
wasn't me that downvoted! it seems to be working now, thanks – user2953989 Mar 17 '16 at 14:00
@user3005003 I know. – Praveen Kumar Purushothaman Mar 17 '16 at 14:00

score -1 · Answer 2 · edited May 23 '17 at 12:15

Instead of putting the image as a img element you could set it as a background image for the .header. This way you can ensure that the text is always on top of the image.

More info on why you should do it like this here.

.header {
  position: relative;
  background-image: url(//placehold.it/200x100);
  width: 200px;
  height: 100px;
}
.HeaderText {
  position: absolute;
  bottom: 0;
  margin: 0 0 10px 10px;
}

<div class="header">
  <p class="HeaderText">Canterbury Tales</p>
</div>

score -2 · Answer 3 · answered Mar 17 '16 at 12:45

-2

Give the image a lower z-index then the text:

.info-image {
width:100%;
position:relative;
z-index: 1;
}

.HeaderText {
position:absolute;
left:35px;
bottom: 10px;
font-size: 3em;
z-index:2;
}

If that doesn't work, try giving the image a position of absolute, and the text a position of relative.

answered Mar 17 '16 at 12:45

Maarten Wolfsen

1,435
2
17
33

The p tag has a higher z-index by default because it's later in the DOM, z-index has nothing to do with this. – dcohenb Mar 17 '16 at 12:56

Get text to appear over image

3 Answers3