MarkNsu MarkNsu - 1 year ago 55
HTML Question

Text inside of image

I just want to add my h2 text and small paragraph inside of my image like this way.

enter image description here

When I add h1 and texts, it's positioned under the image.

enter image description here

Is this happened for bad css positioning?

This is my code

<div className="committeeBackground">
<img src="/images/conference.jpg" alt=""/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

width: 100%;

Answer Source

Do like this, center it using flex and on top using position: absolute

.wrapper {
  position: relative;
  display: inline-block;
.ontop {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
.ontop > div {
  text-align: center;
  color: white;
  font-size: 24px;
<div class="wrapper">
  <img src="" alt="">
  <div class="ontop">
      <h2>Test Text</h2>
      <p><i>Dummy Text Under H2</i></p>