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

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:

<!-- Have used ionic classes -->
<div class="row">
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
    </div>
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
    </div>       
</div>

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

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

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

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   lt div class  containerBox  gt     lt img class  img-responsive     src  https   s20 postimg org huun8e6fh Gold Ring png  gt     lt div class  text-box  gt      lt p class  dataNumber  gt  8  lt  p gt     lt  div gt   lt  div gt    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

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

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

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