Trying to overlay text over an image

Question

My CSS is as follows:

#Container {
  position: relative;
  height: 400px;
  width: 400px;
}

#TitleImage {
  position: absolute;
  left: 0;
  top: 0;
}

#TitleText {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div ID="Container">
  <img src="https://picsum.photos/400" ID="TitleImage">
  <div ID="TitleText">This is my title</div>
</div>

Can anyone see what's wrong? I've tried following tutorials to stack my text over my image but every single time the text just goes underneath the image. How do I fix this?

As you can see (click run code snippet) - your code is fine. I've just added an image. — Ori Drori, Dec 10 '19 at 17:35
@Laif if this image + text combo is for any kind of dynamic content, then `background-image` is a no go. — hungerstar, Dec 10 '19 at 18:22
@hungerstar There's no reason you can't specify the url inline in the same way that you would update an img src. — Libra, Dec 10 '19 at 18:23
You could, but you're still creating an `` with a `
`. Poor choice for general use or dynamic content. Just because you can, doesn't mean you should. — hungerstar, Dec 10 '19 at 19:23

Libra · Answer 1 · 2019-12-10T19:34:02.650

0

You should probably use background-image for this, in which your background image and container are the same size:

#Container{
  background-image:url("https://via.placeholder.com/150");
  width: 150px;
  height: 150px;
}

<div ID="Container">
  <div ID="TitleText">This is my title</div>
</div>

If you insist on doing it your way, you had a lot of unnecessary stuff in there, this is all you need:

#Container {
  position: relative;
  height: 150px;
  width: 150px;
}

#TitleImage {
  position: absolute;
}

#TitleText {
  position: absolute;
  color: red;
}

<div ID="Container">
  <img src="https://via.placeholder.com/150" ID="TitleImage">
  <div ID="TitleText">This is my title</div>
</div>

edited Dec 10 '19 at 19:34

answered Dec 10 '19 at 17:43

Libra

2,544
1
8
24

@hungerstar Why couldn't you just specify the url inline. then it would be the same as an img tag but with the ability to wrap content, which an img tag cannot do. – Libra Dec 10 '19 at 18:23
@hungerstar Again, I fail to see how I'm creating anything as an `` is _completely unable_ to wrap content, which is the reason I am using `
` as it is intended... to wrap content...
– Libra Dec 10 '19 at 19:25
@hungstar It is not true to say this is the same as a `` tag, as an `` **_cannnot_** wrap content. I personally prefer to structure it this way given that I prefer dynamically placed element styling vastly over absolutely positioned. This way, you can handle container overflow and multiple elements much, much easier. If you wanted to dynamically create content inside of the image, it is much easier to structure it like this. This seems to ultimately come down to preference but saying that I am re-creating an `` tag is completely false. – Libra Dec 10 '19 at 22:30
In addition, you don't need to specify the height and width along with the background url, as that could exist in a style-sheet. – Libra Dec 10 '19 at 22:33

Trying to overlay text over an image

1 Answers1