search

Home  >  Q&A  >  body text

How to place text on an image using CSS

<p>How to place text over an image in CSS? </p> <pre class="brush:php;toolbar:false;"><div class="image"> <img src="sample.png"/> <div class="text"> <h2>Some text</h2> </div> </div></pre> <p>I want to do something like below but I'm stuck, here is my current css</p> <pre class="brush:php;toolbar:false;"><style> .image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; margin: 0 auto; width: 300px; height: 50px; } </style></pre> <p>I don't get any output from html2pdf when I use a background image: </p> <pre class="brush:php;toolbar:false;"><style> #image_container{ width: 1000px; height: 700px; background-image:url('switch.png'); } </style> <a href="prints.php">Print</a> <?php ob_start(); ?> <div id="image_container"></div> <?php $_SESSION['sess'] = ob_get_contents(); ob_flush(); ?></pre> <p>This is prints.php: </p> <pre class="brush:php;toolbar:false;"><?php require_once('html2pdf/html2pdf.class.php'); ?> <?php $html2pdf = new HTML2PDF('L', 'A4', 'en'); $html2pdf->writeHTML($_SESSION['sess']); $html2pdf->Output('random.pdf'); ?></pre> <p><br /></p>
P粉696605833P粉696605833537 days ago500

reply all(2)I'll reply

  • P粉041856955

    P粉0418569552023-08-24 13:48:16

    This is another way to use responsive dimensions. It will keep your text centered and maintain its position in the parent. If you don't want it to be centered, it's even easier, just use the absolute parameter. Remember that the main container is using display: inline-block. There are many other ways to achieve this, depending on what you're working with.

    Based onUnknown-centered

    Here is a working codepen example

    HTML

    <div class="containerBox">
        <div class="text-box">
            <h4>Your Text is responsive and centered</h4>
        </div>
        <img class="img-responsive" src="http://placehold.it/900x100"/>
    </div>

    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;
    }
    

    reply
    0
  • P粉349222772

    P粉3492227722023-08-24 09:07:10

    How about something like this: http://jsfiddle.net/EgLKV/3/< /p>

    Done by positioning the text on the image using position:absolute and z-index.

    #container {
      height: 400px;
      width: 400px;
      position: relative;
    }
    #image {
      position: absolute;
      left: 0;
      top: 0;
    }
    #text {
      z-index: 100;
      position: absolute;
      color: white;
      font-size: 24px;
      font-weight: bold;
      left: 150px;
      top: 350px;
    }
    <div id="container">
      <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
      <p id="text">
        Hello World!
      </p>
    </div>

    reply
    0
  • Cancelreply