How do I layer an image underneath specific text instead of a background?

Question

Sorry if the initial title has some poor wording, but what I am asking is how to add an image underneath of text in CSS/HTML. Please note I am referring to a specific location on the screen, rather than a background image -- kind of similar to how most titles in Google Sites contain an image/design underneath of the title.

I tried changing around the order of each element on both the HTML and CSS end of the site, but no matter the order I had the elements; the text still didn't appear, with the image covering it.

As well I tried testing around with positioning, but the image still appears on top of the text -- and the position was already set to absolute lol, this being a layering issue not a positioning issue

Answer 1

To layer elements with CSS, you can set the position to absolute and you can lower the z-index. Elements with a lower z-index will have a lower layer on the page. For example, a z-index of 1 will appear over a z-index of -1.

#my-img {
  z-index: 0;
  position: absolute;
}
#my-text {
  z-index: 1;
  position: absolute;
}

In the code above, the text will appear above the image.

Answer 2

I think you can try background-image in css

background-image: url('img_url');

I will work fine