-1

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

j08691
  • 204,283
  • 31
  • 260
  • 272
AnonymousAlbertan
  • 1
  • 1
    Welcome to SO, I recommend checking out [mcve] and [ask]. If you are absolute positioning use z-index to determine what goes on top. The higher the number the higher the layer. – imvain2 May 24 '23 at 17:33
  • Can you share a screenshot of an example view? I am having a hard time understanding what you want to achieve. – C.Aglar May 24 '23 at 18:04
  • Are you saying you want the image to stay in the same place in the viewport - possibly for example with text scrolling 'over' it? – A Haworth May 24 '23 at 18:42
  • Please provide enough code so others can better understand or reproduce the problem. – Community May 24 '23 at 18:58

2 Answers2

0

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.

Charles Masgalas
  • 65
  • 7
-1

I think you can try background-image in css

background-image: url('img_url');

I will work fine

Pham Duc Quy
  • 27
  • 1
  • 2