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

164,888
24
203
252

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 -2 · Answer 2 · 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,625
3
19
35

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

2 Answers2