How to position text over an image with CSS

Question

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

it is possibl to make it with a background image ? – Webwoman Aug 05 '18 at 01:24 — Webwoman, Aug 05 '18 at 01:24
This make overlay effect in image – Rayees AC Sep 20 '20 at 09:19 — Rayees AC, Sep 20 '20 at 09:19

Ayush · Accepted Answer · 2016-02-25T19:42:48.843

197

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>

edited Feb 25 '16 at 19:42

answered Jan 03 '12 at 07:48

Ayush

41,754
51
164
239

18

You could avoid the z-index – FooBar Mar 12 '14 at 16:22
9

@danielad: It was working fine until you edited the answer. I've rolled back your edits. – Ayush Feb 25 '16 at 21:35
haah-- thank me i just remind you to fix things up --it was not working yesterday - vene the hello world text – Develop4Life Feb 26 '16 at 05:58
How could you get the text in the middle of the image? Left 200, bottom 200? – Mason H. Hatfield Jun 14 '16 at 16:32
@MasonH.Hatfield Yes, just fiddle around with the left and bottom values to move the text around – Ayush Jun 27 '16 at 21:39
7

Sadly this ends up being a really bad option if you want your site to follow modern, responsive practices as you're fixing the size of the container (the answer was from 2012 so its understandably out of date). A much better solution can be found here: https://stackoverflow.com/questions/43333495/text-over-image-responsive – Sk446 Jul 15 '18 at 12:17

score 33 · Answer 2 · edited Apr 19 '23 at 03:56

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

Kailas · Answer 3 · 2016-03-01T12:14:39.400

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

score 8 · Answer 4 · answered Jan 03 '12 at 07:03

8

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.

answered Jan 03 '12 at 07:03

Harry Joy

58,650
30
162
207

2

What if the image needs to be a semantic part of the document? – animuson Jan 03 '12 at 07:04
@animuson: I don't think this is the case in here. :\ – Harry Joy Jan 03 '12 at 07:10
I'm using html2pdf to generate a pdf from it and if I use background-image I do not get anything. – Wern Ancheta Jan 03 '12 at 07:16
8

@KyokaSuigetsu : then you should change question title to contain that you are using html2pdf. – Harry Joy Jan 03 '12 at 08:16

score 4 · Answer 5 · answered Jan 03 '12 at 07:05

4

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.

answered Jan 03 '12 at 07:05

Yevgeny Simkin

27,946
39
137
236

I'm using html2pdf to create a pdf from those. I do not see any image if I use a background-image. Please see my edit. – Wern Ancheta Jan 03 '12 at 07:13
I'm sorry, I have no idea what html2pdf is. – Yevgeny Simkin Jan 03 '12 at 07:24

score 3 · Answer 6 · edited Feb 11 '22 at 19:18

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>

score 0 · Answer 7 · edited Feb 11 '22 at 19:17

0

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>

edited Feb 11 '22 at 19:17

isherwood

58,414
16
114
157

answered Apr 29 '17 at 05:49

Amit Bisht

4,870
14
54
83

2

Headings have no business inside a paragraph. It's invalid HTML. – isherwood Feb 11 '22 at 19:17

score 0 · Answer 8 · answered Nov 20 '22 at 22:49

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/Wikipedia-logo-v2@2x.png" 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%);

How to position text over an image with CSS

8 Answers8

Linked

Related