How to write text over an image?

Stack Overflow Asked by Hichem Neggaz on December 1, 2020

I want to write a text over an image and i want it to be centered over the image
this is the HTML code:

<div class="cloud d-flex justify-content-center">
    <div class=" col-md-4 col-xs-6 col-sm-6">
        <img  src="./img/CloudB.png" class="img-fluid ">
        <p id="exp">EXPLORE YOUR LANGUAGE </p>
    </div>
</div>

bootstrap 4 css html

2 Answers

<div>
    <div class='clueless'>
        <img  src="./img/CloudB.png" class="img-fluid ">
        <p id="exp">EXPLORE YOUR LANGUAGE </p>
    </div>
</div>

in css::

.clueless{
  position:relative;
}

img{
  height: 100%;
  width: 100%;
  opacity: 0.8;
}

#exp{
  position:absolute;
  left: 50%;
  top: 50%;
}

you are good to go.i avoided unimportant inline attr.

Correct answer by Tawsif on December 1, 2020

short message use position:relative; on image and use position:absolute; and direction like left or right or you can use transform for image .

Answered by Jeet Viramgama on December 1, 2020

Add your own answers!

Ask a Question

Get help from others!