CODEWITHSUNDEEP
htmlcss
Wern Ancheta
Wern Ancheta

Reputation: 23297

How to position text over an image with CSS

How do I center a text over an image in css?

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

I want to do something like the one below but I'm having difficulties, here's my current css

<style>
.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}
</style>

enter image description here

When I use background-image I do not get any output from html2pdf:

<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();
?>

Here's prints.php:

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

Upvotes: 153

Views: 690941

Answers (8)

Ghost Echo
Ghost Echo

Reputation: 2067

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

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

Upvotes: 33

HoldOffHunger
HoldOffHunger

Reputation: 20851

Quick solution: Set position: relative; on the container element and set position: absolute; on child elements in that container element, with the necessary top, left, bottom, right-adjusting parameters:

.top-left {
    position: absolute;
    top: 2px;
    left: 2px;
}

.bottom-right {
    position: absolute;
    bottom: 2px;
    right: 2px;
}

.container {
    position: relative;
    text-align: center;
    color: white;
    float:left;color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
    <div class="container" style="">
    
        <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/[email protected]" width="100">
        <div class="top-left">Wikipedia</div>
        <div class="bottom-right">Everyone's Encyclopedia</div>
    
    </div>

Center it directly in the middle with the following CSS...

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

Upvotes: 0

Jim Schwetz
Jim Schwetz

Reputation: 105

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/

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

Upvotes: 3

Amit Bisht
Amit Bisht

Reputation: 5136

A small and short way of doing the same:

.image {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  height: 300px;
  color: white;
  background: url('https://via.placeholder.com/600') no-repeat;
  background-size: 250px 250px;
}
<div class="image">
  <p>
    <h3>Heading 3</h3>
    <h5>Heading 5</h5>
  </p>
</div>

Upvotes: 0

Kailas
Kailas

Reputation: 7578

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... :)

Upvotes: 9

Ayush
Ayush

Reputation: 42440

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.

#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>

Upvotes: 200

Yevgeny Simkin
Yevgeny Simkin

Reputation: 28349

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.

Upvotes: 4

Harry Joy
Harry Joy

Reputation: 59660

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.

Upvotes: 10

Related Questions