How to put text over images in html

Question

How to put text over images in HTML  Everytime I enter the below code  the text goes under the image    lt img src  example jpg  gt Text lt  img gt

User · Answer

You need to use absolutely-positioned CSS over a relatively-positioned img tag  The article Text Blocks Over Image gives a step-by-step example for placing text over an image

User · Answer

Using absolute as position is not responsive   mobile friendly  I would suggest using a div with a background-image and then placing text in the div will place text over the image  Depending on your html  you might need to use height with vh value

User · Answer

The  lt img gt  element is empty     it doesn t have an end tag   If the image is a background image  use CSS  If it is a content image  then set position  relative on a container  then absolutely position the image and or text within it

User · Answer

You can create a div with the exact same size as the image    lt div class  imageContainer  gt Some Text lt  div gt    use the css background-image property to show the image    imageContainer          width 200px          height 200px          background-image  url locationoftheimage        more here  note  this slichtly tampers the semantics of your document  If needed use javascript to inject the div in the place of a real image

User · Answer

You can try this      lt div class  image  gt          lt img src    alt      gt          lt h2 gt Text you want to display over the image lt  h2 gt    lt  div gt    CSS   image       position  relative      width  100      for IE 6       h2       position  absolute      top  200px      left  0      width  100

[html] How to put text over images in html?

Examples related to html