How to position text over an image in css

Question

How do I center a text over an image in css    lt div class  image  gt       lt img src  sample png   gt       lt div class  text  gt          lt h2 gt Some text lt  h2 gt       lt  div gt   lt  div gt    I want to do something like the one below but I m having difficulties  here s my current css   lt style gt   image      position  relative     h2      position  absolute     top  200px     left  0     width  100      margin  0 auto     width  300px     height  50px     lt  style gt      When I use background-image I do not get any output from html2pdf    lt style gt   image container      width  1000px      height  700px      background-image url  switch png       lt  style gt   lt a href  prints php  gt Print lt  a gt   lt  php ob start      gt   lt div id  image container  gt  lt  div gt   lt  php    SESSION  sess     ob get contents     ob flush      gt    Here s prints php    lt  php require once  html2pdf html2pdf class php      gt   lt  php  html2pdf   new HTML2PDF  L    A4    en     html2pdf- gt writeHTML   SESSION  sess      html2pdf- gt Output  random pdf      gt

User · Answer

as of 2017 this is more responsive and worked for me. This is for putting text inside vs over, like a badge. instead of the number 8, I had a variable to pull data from a database.

this code started with Kailas's answer up above

https://jsfiddle.net/jim54729/memmu2wb/3/

My HTML

<div class="containerBox">
  <img class="img-responsive"    src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
  <div class='text-box'>
   <p class='dataNumber'> 8 </p>
  </div>
</div>

and my css:

.containerBox {
  position: relative;
  display: inline-block;
}

.text-box {
  position: absolute;
  height: 30%;
  text-align: center;
  width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 30px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: 120px;
  margin: auto;
  padding: auto;
}

.dataNumber {
  margin-top: auto;
}

User · Answer

A small and short way of doing the same  HTML   lt div class  image  gt        lt p gt           lt h3 gt Heading 3 lt  h3 gt           lt h5 gt Heading 5 lt  h5 gt        lt  p gt   lt  div gt    CSS     image           position  relative          margin-bottom  20px          width  100           height  300px          color  white          background  url        Images myImg jpg   no-repeat          background-size  250px 250px

User · Answer

Why not set sample png as background image of text or h2 css class  This will give effect as you have written over an image

User · Answer

How about something like this  http   jsfiddle net EgLKV 3   Its done by using position absolute and z-index to place the text over the image    x000D   x000D   container   x000D    height  400px  x000D    width  400px  x000D    position  relative  x000D    x000D   image   x000D    position  absolute  x000D    left  0  x000D    top  0  x000D    x000D   text   x000D    z-index  100  x000D    position  absolute  x000D    color  white  x000D    font-size  24px  x000D    font-weight  bold  x000D    left  150px  x000D    top  350px  x000D    x000D   lt div id  container  gt  x000D     lt img id  image  src  http   www noao edu image gallery images d4 androa jpg    gt  x000D     lt p id  text  gt  x000D      Hello World  x000D     lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For a responsive design it is good to use a container having a relative layout and content  placed in container  having fixed layout as   CSS Styles     Centering element in a base container     contianer-relative     position  relative       content-center-text-absolute     position  absolute     text-align  center    width  100     height  0     margin  auto    top  0    left  0    bottom  0    right  0    z-index  51      HTML code     lt  -- Have used ionic classes -- gt   lt div class  row  gt       lt div class  col remove-padding contianer-relative  gt  lt  -- container with position relative -- gt           lt div class  item item-image clear-border   gt  lt a href     gt  lt img ng-src  img engg-manl png  alt  ENGINEERING MANUAL  title  ENGINEERING MANUAL   gt  lt  a gt  lt  div gt   lt  -- Image intended to work as a background -- gt           lt h4 class  content-center-text-absolute white-text  gt  lt strong gt ENGINEERING  lt br gt  MANUALS lt  strong gt  lt  h4 gt  lt  -- content div with position fixed -- gt       lt  div gt       lt div class  col remove-padding contianer-relative  gt  lt  -- container with position relative -- gt           lt div class  item item-image clear-border  gt  lt a href     gt  lt img ng-src  img contract-directory png  alt  CONTRACTOR DIRECTORY  title  CONTRACTOR DIRECTORY  gt  lt  a gt  lt  div gt  lt  -- Image intended to work as a background -- gt           lt h4 class  content-center-text-absolute white-text  gt  lt strong gt CONTRACTOR  lt br gt  DIRECTORY lt  strong gt  lt  h4 gt  lt  -- content div with position fixed -- gt       lt  div gt          lt  div gt    For IONIC Grid layout  evenly spaced grid elements and the classes used in above HTML  please refer - Grid  Evenly Spaced Columns  Hope it helps you out

User · Answer

as Harry Joy points out  set the image as the div s background and then  if you only have one line of text you can set the line-height of the text to be the same as the div height and this will place your text in the center of the div   If you have more than one line you ll want to set the display to be table-cell and vertical-alignment to middle

User · Answer

This is another method for working with Responsive sizes  It will keep your text centered and maintain its position within its parent  If you don t want it centered then it s even easier  just work with the absolute parameters  Keep in mind the main container is using display  inline-block  There are many others ways to do this  depending on what you re working on   Based off of Centering the Unknown  Working codepen example here  HTML   lt div class  containerBox  gt       lt div class  text-box  gt           lt h4 gt Your Text is responsive and centered lt  h4 gt       lt  div gt       lt img class  img-responsive  src  http   placehold it 900x100   gt   lt  div gt    CSS   containerBox       position  relative      display  inline-block     text-box       position  absolute          height  100       text-align  center          width  100      text-box before      content         display  inline-block     height  100      vertical-align  middle    h4      display  inline-block     font-size  20px    or whatever you want      color   FFF       img     display  block    max-width  100     height  auto

[html] How to position text over an image in css

Examples related to html

Examples related to css